websocket协议

WebSocket是一种协议，允许服务器和客户端之间的持久TCP连接，以便它们可以随时交换数据。任何客户端或服务器应用程序都可以使用WebSocket，但主要是Web  浏览器和Web服务器。通过WebSocket，服务器可以在没有事先客户端请求的情况下将数据传递到客户端，从而允许动态内容更新。(全双工通信：又称为双向同时通信，即通信的双方可以同时发送和接收信息的信息交互方式。)

1、编写WebSocket客户端应用程序

1.1创建WebSocket对象编辑部分

为了使用WebSocket协议进行通信，您需要创建一个WebSocket对象; 这将自动尝试打开与服务器的连接。

WebSocket构造函数接受一个必需参数和一个可选参数：

webSocket = new WebSocket（url，protocols）;

url

要连接的URL; 这应该是WebSocket服务器将响应的URL。这应该使用URL方案wss://，尽管某些软件可能允许您使用不安全ws://的本地连接。

protocols 可选的

单个协议字符串或协议字符串数组。这些字符串用于指示子协议，因此单个服务器可以实现多个WebSocket子协议（例如，您可能希望一个服务器能够根据指定的不同处理不同类型的交互protocol）。如果未指定协议字符串，则假定为空字符串。

SecurityError

如果目标不允许访问，构造函数将抛出一个。如果您尝试使用不安全的连接，则可能会发生这种情况（大多数用户代理现在需要所有WebSocket连接的安全链接，除非它们位于同一设备上或可能位于同一网络上）。

实例

这个简单的示例创建了一个新的WebSocket，连接到服务器wss://www.example.com/socketserver。在此示例中，在套接字请求中命名了“protocolOne”的自定义协议，但这可以省略。

var exampleSocket = new WebSocket("wss://www.example.com/socketserver", "protocolOne");

回来exampleSocket.readyState的时候CONNECTING。 一旦连接准备好传输数据，readyState将成为OPEN。

1.2将数据发送到服务器

打开连接后，即可开始向服务器传输数据。为此，只需为要发送的每条消息调用WebSocket对象的send()方法：

exampleSocket.send("Here's some text that the server is urgently awaiting!");

您可以将数据作为字符串发送Blob，或ArrayBuffer。

       由于建立连接是异步的并且容易出现故障，因此无法保证send()在创建WebSocket对象后立即调用该方法将会成功。我们至少可以确定，只有在建立连接时才尝试发送数据，方法是定义一个onopen事件处理程序来完成工作：

exampleSocket.onopen = function (event) {
  exampleSocket.send("Here's some text that the server is urgently awaiting!"); 
};

使用JSON传输对象

 

您可以做的一件事就是使用JSON  将合理复杂的数据发送到服务器。例如，聊天程序可以使用使用JSON封装数据包实现的协议与服务器交互：

// Send text to all users through the server
function sendText() {
  // Construct a msg object containing the data the server needs to process the message from the chat client.
  var msg = {
    type: "message",
    text: document.getElementById("text").value,
    id:   clientID,
    date: Date.now()
  };

  // Send the msg object as a JSON-formatted string.
  exampleSocket.send(JSON.stringify(msg));
  
  // Blank the text input element, ready to receive the next line of text from the user.
  document.getElementById("text").value = "";
}

1.3从服务器接收消息

WebSockets是一个事件驱动的API; 收到消息时，message会向WebSocket对象发送一个事件。要处理它，请为事件添加事件侦听器message，或使用onmessage事件处理程序。要开始侦听传入数据，您可以执行以下操作：

exampleSocket.onmessage = function (event) {
  console.log(event.data);
}

接收和解释JSON对象

让我们首先考虑使用JSON来传输对象时提到的聊天客户端应用程序。客户端可能会收到各种类型的数据包，例如：

• 登录握手
• 消息文本
• 用户列表更新

解释这些传入消息的代码可能如下所示：

exampleSocket.onmessage = function(event) {
  var f = document.getElementById("chatbox").contentDocument;
  var text = "";
  var msg = JSON.parse(event.data);
  var time = new Date(msg.date);
  var timeStr = time.toLocaleTimeString();
  
  switch(msg.type) {
    case "id":
      clientID = msg.id;
      setUsername();
      break;
    case "username":
      text = "<b>User <em>" + msg.name + "</em> signed in at " + timeStr + "</b><br>";
      break;
    case "message":
      text = "(" + timeStr + ") <b>" + msg.name + "</b>: " + msg.text + "<br>";
      break;
    case "rejectusername":
      text = "<b>Your username has been set to <em>" + msg.name + "</em> because the name you chose is in use.</b><br>"
      break;
    case "userlist":
      var ul = "";
      for (i=0; i < msg.users.length; i++) {
        ul += msg.users[i] + "<br>";
      }
      document.getElementById("userlistbox").innerHTML = ul;
      break;
  }
  
  if (text.length) {
    f.write(text);
    document.getElementById("chatbox").contentWindow.scrollByPages(1);
  }
};

在这里，我们使用JSON.parse() 将JSON对象转换回原始对象，然后检查并处理其内容。

文本数据格式

通过WebSocket连接接收的文本采用UTF-8格式。

1.4 关闭连接

使用完WebSocket连接后，调用WebSocket方法close()：

exampleSocket.close();

bufferedAmount在尝试关闭连接之前检查套接字的属性以确定是否还有任何数据尚未在网络上传输可能会有所帮助。如果此值不为0，则仍有未决数据，因此您可能希望在关闭连接之前等待。