Websocket 连接。我们为什么要调用 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。

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

这段代码在做什么：

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

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

那是什么网址？

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

Websocket 是外部 API 吗？

它是一种协议，它指定了一种连接方式、一种安全方案、一种数据包数据格式等……你可以说 http 协议是 webSocket 协议，就像英语是日语一样。它们是不同的交流方式。 webSocket 协议的规范在这里：https://www.rfc-editor.org/rfc/rfc6455。

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

网上有很多关于 webSocket 协议的用途和用途的文章，所以我不会在这里重复。可以看webSocket客户端的教程here和webSocket服务器的教程here。

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

我正在查看网络选项卡，我看到了这个。从概念上讲，发生了什么？

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

请求方法：GET 状态码：

101 Web Socket 协议握手

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

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

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