Websocket连接。我们为什么要打电话给ws://echo.websocket.org?

时间:2018-05-01 04:42:14

标签: websocket

我正在写一些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的请求?

1 个答案:

答案 0 :(得分:2)

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://tools.ietf.org/html/rfc6455

它的设计也非常适合http /浏览器世界,并且与最初为http请求设计的基础设施相容。只是搜索&#34;什么是websocket&#34;谷歌将发布各种描述性文章。 Wikipedia page for webSocket提供了非常好的概述。

网上有关于webSocket协议的内容并且非常有用,所以我不会在这里重复一遍。您可以在webSocket客户端here上看到一个教程,在webSocket服务器here上看到一个教程。

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

  

我正在查看网络标签,我看到了这一点。从概念上讲,发生了什么?

     

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

     

请求方法:GET状态代码:

     

101 Web套接字协议握手

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

  

为什么我需要向外部网站发出使用Websockets的请求?

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