html5 WebSocket

╰半橙微兮° 2022-08-21 04:56 187阅读 0赞

websocket允许我们建立时时全双共的web实时通信,websocket没有出现之前，我们是利用长轮询，客户端和服务器建立起长期的链接，直到服务器数据状态改变或者时间过期才关闭，而每次的链接和请求都会把http 头部的一连串信息带过去，例如cookie等等，这样子会导致网络带宽还有延时等等，如果服务端的数据变更非常频繁的话，这种效率想必很低。

websoket通过一种握手协议来建立链接

1.  客户端请求一个链接，头部中包含如下信息

GET /demo HTTP/1.1 
    Host: example.com 
    Connection: Upgrade 
    Sec-WebSocket-Key2: 12998 5 Y3 1 .P00 
    Upgrade: WebSocket 
    Sec-WebSocket-Key1: 4@1 46546xW%0l 1 5 
    Origin: http://example.com 
    [8-byte security key]

1.  服务器根据头部中的Sec-WebSocket-Key2，Sec-WebSocket-Key1，Upgrade，\[8-byte security key\] 知道客户端需要一个websocket协议链接，于是返回一个消息，包含如下头部

HTTP/1.1 101 WebSocket Protocol Handshake 
    Upgrade: WebSocket 
    Connection: Upgrade 
    WebSocket-Origin: http://example.com 
    WebSocket-Location: ws://example.com/demo 
    [16-byte hash response]

1.  客户端收到消息之后，建立起websocket链接，这时就可以进行实时通信了

websocket是一种协议，若要和服务器简历起websocket链接，服务器必须要建立起websocket协议规范，这里我们不讨论服务器，我们讨论客户端如果进行websocket通信。

首先我们打开一个套接字链接，

// 创建一个websocket链接
    var socket = new WebSocket('ws://192.158...');

websocket是一个打开过程，我们可以通过事件回调来处理业务过程

socket.onopen = function (evt) {
       ...};  //打开的回调
     socket.onclose = function (evt) {
       ...};  //关闭的回调
     socket.onmessage = function (evt) {
       ...};  //消息发送成功，获取服务器消息时候的回调
     socket.onerror = function (evt) {
       ...}; //发送和接收过程出现错误的回调

通过websocket发送消息，如果我们有一个点击按钮，我们可以直接在里面发送数据

document.querySelect("#btn").onclick = function(){ 
      socket.send(message); //发送消息
    }

发送消息出去，接收服务器消息，我们可以在socket的onmessage的回调函数里面获取数据

socket.onmessage = function(event) { 
      var message = event.data; //获取到服务器数据
    };

当我们想停止通讯时，我们必须要关闭socket链接来节省资源和避免不必要的错误

socket.close(); //关闭链接

websocket基本的用法如上，现在浏览器对websocket的兼容性都比较好了，除了IE，需要在IE10+

![这里写图片描述][20160316175711293]

博文参考

[http://blog.teamtreehouse.com/an-introduction-to-websockets][http_blog.teamtreehouse.com_an-introduction-to-websockets]

[20160316175711293]: /images/20220731/877e30d3982344afbff9b864ab4ff280.png
[http_blog.teamtreehouse.com_an-introduction-to-websockets]: http://blog.teamtreehouse.com/an-introduction-to-websockets