WebSocket 一、编写WebSocket客户端

最新推荐文章于 2024-08-16 22:14:22 发布

qq874655551

最新推荐文章于 2024-08-16 22:14:22 发布

阅读量8.9k

点赞数 3

分类专栏： c#-web 文章标签： websocket 客户端 typescript

本文链接：https://blog.csdn.net/wanglui1990/article/details/79306377

版权

c#-web 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

原文链接：Writing WebSocket client applications
WebSocket client应用程序通过WebSocket协议与WebSocket servers 通讯。
Note: 此功能可应用于 Web Workers。使用 Web Workers链接。

步骤：

1. 创建WebSocket对象。

要使用WebSocket 协议进行通信，需要创建一个 WebSocket 对象；创建WebSocket对象的过程，会自动尝试打开与服务器的连接。

WebSocket 构造函数要求一个必要参数url与一个可选参数protocol:

WebSocket WebSocket(
  in DOMString url,
  in optional DOMString protocols
);

url:
要连接的URL；也就是用来响应的WebSocket server的URL。
protocols 可选：
一个string值类型的协议名称或一个string值类型的数组。这些字符串用于指示子协议，以便单个服务器可以实现多个WebSocket子协议（例如，您可能希望一个服务器能够根据指定的协议处理不同类型的交互）。如果您不指定协议字符串，则假定为空字符串。

构造函数可能抛出的异常：
SECURITY_ERR
正在尝试连接的端口被阻塞。

连接错误
如果尝试连接时发生错误，首先会将名为“error”的简单事件发送给WebSocket对象（从而调用它的onerror处理程序），然后将CloseEvent发送给WebSocket对象（从而调用它的onclose处理程序）以指出连接关闭的原因。

从Firefox 11开始，通常会在Mozilla平台的控制台中收到描述性错误消息，并通过CloseEvent收到RFC 6455第7.4节中定义的结束代码。

示例
这个例子创建了一个新的WebSocket，连接到WebSocket 服务器地址是ws://www.example.com/socketserver，协议是一个自定义协议”protocolOne”（可选项）。

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

返回时，exampleSocket.readyState是CONNECTING。一旦连接准备好传输数据，readyState将变为OPEN。

如果你想打开一个连接并且对你所支持的协议很灵活，你可以指定一个协议数组：

var exampleSocket = new WebSocket("ws://www.example.com/socketserver", ["protocolOne", "protocolTwo"]);

一旦建立了连接（即readyState是OPEN），exampleSocket.protocol会告诉你服务器选择了哪个协议。

在上面的例子中，http被ws取代，同样http被wss取代。建立WebSocket依赖于HTTP Upgrade 机制，所以当我们发送HTTP请求ws：//www.example.com或wss：//www.example.com给服务器，协议会自动升级（不知道翻译的对不对）
下图说明的很清楚(来源)：
这里写图片描述
步骤是
1，客户端(192.168.1.99:45836)发送请求到服务器hoyo.idv.tw :80。
2，服务器根据请求的header（Upgrade: websocket），升级http协议为WebSocket并返回。
3，以上WebSocket建立后便于http没有任何关系了。之后使用WebSocket发送、接收消息都是通过socket通信(客户端与服务器端的连接端口与协议已改变)，都是在客户端(192.168.1.99:47508)与服务器（ws://hoyo.idv.tw:1030）之间进行。
4，发送、接收消息前后，都可以再跟进实际应用做判断：是否已认证？没认证不允许发消息？

2. 向服务器发送数据

1，建立连接后，可以通过WebSocket 对象的 send()方法发送数据。

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

发送的数据可以是字符串，也可以是 Blob, 或者 ArrayBuffer。
Note: Firefox 11版本,只支持发送字符串。

2，由于建立连接是异步的并且容易失败，因此不能保证在创建WebSocket对象之后立即调用send（）方法将会成功。但至少可以确定，可以通过定义onopen处理程序来实现：只在建立连接后，才会尝试发送数据。

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

3，使用 JSON 传输对象
可以使用JSON将复杂的数据发送给服务器。例如，聊天程序可以使用使用JSON-encapsulated(封装)数据包实现的协议与服务器交互：

// 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 = "";
}

4，接收服务器端的数据
考虑一下聊天客户端应用程序，它使用前面3中提及的JSON传输对象(Using JSON to transmit objects. )。客户端可能会收到不同类型的数据包，如：

Login handshake
Message text
User list updates
解释代码：

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);
  }
};