websocket实现原理

Posted 2021-02-19 天空003

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了websocket实现原理相关的知识，希望对你有一定的参考价值。

先来了解一下websocket的应用场景？

聊天客服 在线咨询 即时通讯喜欢使用websocket来实现

即时通讯实现原理有两种：

1.ajax轮询（使用定时器，每隔一段时间发送ajax到后台）

举个例子吧：

用户A 提交一条消息为：你吃饭了没？

服务器会存：用户A 你吃饭了没

当用户B向后台发送请求的时候，就能从服务器拿到用户A给她发送的信息

以上就是ajax轮询，定时器一直发送ajax，显然性能上不是很好，所以websockt应运而生

2.WebSocket（常用）

WebSocket是原生js就支持的，前端需要链接websocket 后端也需要链接两个才可以通讯所以这个事必须前后端配合

Websocket是应用层第七层上的一个应用层协议，WebSocket 的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话。

HTTP 有 1.1 和 1.0 之说，也就是所谓的 keep-alive ，把多个 HTTP 请求合并为一个，但是 Websocket 其实是一个新协议，跟 HTTP 协议基本没有关系，只是为了兼容现有浏览器，所以使用了 HTTP 。

客户端首先会向服务端发送一个 HTTP 请求，包含一个 Upgrade 请求头来告知服务端客户端想要建立一个 WebSocket 连接

WebSocket的特点：

建立在 TCP 协议之上，服务器端的实现比较容易。
与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。
数据格式比较轻量，性能开销小，通信高效。
可以发送文本，也可以发送二进制数据。
没有同源限制，客户端可以与任意服务器通信。
协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。

  initwebsocket: function() {
      var url =
        "ws://" +
        location.host +
        ":8080/chat?id=" +
        this.$store.state.userInfo.id +
        "&token=" +
        this.$store.state.userInfo.token;
            this.webSocket = new WebSocket(url);
            // 通过 onmessage 事件来接收服务器返回的数据
      this.webSocket.onmessage = function(evt) {
        if (evt.data.indexOf("}") > -1) {
                    //这里处理接收到的消息
                    console.log(evt.data)
          this.$store.dispatch("reciveMessage", JSON.parse(evt.data));
        } else {
          //心跳消息
          console.log("recv<==" + evt.data);
        }
      }.bind(this);
      this.webSocket.onclose = function(evt) {
        console.log(evt.data); //关闭websocket连接事件处理
      };
      this.webSocket.onerror = function(evt) {
        console.log(evt.data); //websocket错误处理
      };
    },