网络套接字连接。为什么我们要调用 ws://echo.websocket.org？

Question

我正在编写一些 websocket 代码，到目前为止我有这个：

window.onload = function() {

  // Get references to elements on the page.
  var form = document.getElementById('message-form');
  var messageField = document.getElementById('message');
  var messagesList = document.getElementById('messages');
  var socketStatus = document.getElementById('status');
  var closeBtn = document.getElementById('close');

  var socket = new WebSocket('ws://echo.websocket.org');

  // Show a connected message when the WebSocket is opened.
  socket.onopen = function(event) {
    socketStatus.innerHTML = 'Connected to: ' + event.currentTarget.url;
    socketStatus.className = 'open';
  };

  // Handle any errors that occur.
  socket.onerror =  function(error) {
    console.log('WebSocket Error: ' + error);
  };

  form.onsubmit = function(e) {
    e.preventDefault();

    // Retrieve the message from the textarea.
    var message = messageField.value;

    // Send the message through the WebSocket.
    socket.send(message);

    // Add the message to the messages list.
    messagesList.innerHTML += '<li class="sent"><span>Sent:</span>' + message +
                              '</li>';

    // Clear out the message field.
    messageField.value = '';

    return false;
  };

  socket.onmessage = function(event) {
    var message = event.data;
    messagesList.innerHTML += '<li class="received"><span>Received:</span>' +
                             message + '</li>';
  };

  closeBtn.onclick = function(e) {
    e.preventDefault();

    // Close the WebSocket.
    socket.close();

    return false;
  };

  socket.onclose = function(event) {
    socketStatus.innerHTML = 'Disconnected from WebSocket.';
    socketStatus.className = 'closed';
  };
};

这段代码在做什么：

 var socket = new WebSocket('ws://echo.websocket.org');

那是什么网址？当我使用浏览器访问那里时，它不存在，但这似乎很重要，因为我不能简单地用随机字符串替换该 url。它有什么作用？Websocket 是外部 API 吗？

我正在查看网络选项卡，我看到了这个：

Request URL: ws://echo.websocket.org/
Request Method: GET
Status Code: 101 Web Socket Protocol Handshake

从概念上讲，这是怎么回事？为什么我需要向外部站点发出请求才能使用 Websockets？

Answer 1

echo.websocket.org提供了一个 webSocket 服务器，让您可以与它建立 webSocket 连接，然后它会简单地将您发送的任何内容回显给您。它主要用于测试和演示目的。

您显示的代码看起来像一个演示/测试应用程序，旨在为 webSocket 连接在浏览器网页中运行，您可以在此处访问类似的内容：https ://websocket.org/echo.html 。

以 开头的 URLws://表示打算使用 webSocket 协议的连接。

这段代码在做什么：

var socket = new WebSocket('ws://echo.websocket.org');

它正在建立到 webSocket 服务器的 webSocket 连接echo.websocket.org。

那是什么网址？

这是一个 webSocket URL，指示使用 webSocket 协议连接和与该主机对话的意图。这不是您在浏览器的 URL 栏中键入的内容。它是一种编程语言（例如浏览器中的 Javascript）使用的东西。

Websocket 是外部 API 吗？

它是一种指定连接方式、安全方案、数据包格式等的协议……您可以说 http 协议之于 webSocket 协议，就像英语之于日语一样。它们是不同的通信方式。webSocket 协议的规范在这里：https ://tools.ietf.org/html/rfc6455 。

它还旨在很好地适应 http/浏览器世界，并与最初为 http 请求设计的基础设施友好。只需在 Google 上搜索“什么是 websocket”，就会出现各种描述性文章。webSocket的维基百科页面提供了一个很好的概述。

网上有很多关于 webSocket 协议是什么以及对它有用的文章，所以我不会在这里重复。您可以在此处查看有关 webSocket 客户端的教程，在此处查看有关 webSocket 服务器的教程。

简而言之，它被设计为一个持久的、连续的连接（所有现代浏览器都支持），允许客户端连接到服务器，然后（可能）长时间保持连续连接。当该连接打开时，可以通过 webSocket 轻松地双向发送数据。人们使用它的主要原因是他们希望服务器能够及时将数据直接发送到客户端，而不必让客户端不断地一遍又一遍地询问服务器是否有任何新数据。一旦建立了 webSocket 连接，服务器就可以随时将数据“推送”到客户端。

我正在查看网络选项卡，我看到了这一点。从概念上讲，这是怎么回事？

请求网址：ws://echo.websocket.org/

请求方法：GET 状态码：

101 Web Socket协议握手

这些是建立 webSocket 连接的第一步。您可以在此处查看有关该连接如何工作的更完整说明：How socket.io works。那篇文章谈到了 socket.io，它是构建在 webSocket 之上的另一层，但底层协议是 webSocket。

为什么我需要向外部站点发出请求才能使用 Websockets？

webSocket 的目的是将客户端连接到服务器（因此可以在它们之间发送数据），因此它只会在连接到某处的某个服务器时使用。