学习websocket

一、什么是websocket

websocket是一种网络通信协议。

由于http协议只能由客户端来发起请求，这个缺陷导致我们在做聊天功能，只能用轮询的方法。这样既麻烦效率又低。于是就有了websocket协议。

特点：客户端可以直接向服务端发起请求，服务端可以主动向客户端发起请求。

二、客户端如何使用

var ws = new WebSocket("wss://echo.websocket.org");

ws.onopen = function(evt) { 
  console.log("连接websocket");
};

ws.onmessage = function(evt) {
  console.log( "收到的消息: " + evt.data);
};

ws.onclose = function(evt) {
  console.log("关闭连接");
};  
  
// 发送消息
ws.send('Hello Server!');

使用sockjs-client

SockJS是一个浏览器JavaScript库，它提供了一个类似于网络的对象。SockJS提供了一个连贯的、跨浏览器的Javascript API，它在浏览器和web服务器之间创建了一个低延迟、全双工、跨域通信通道。
在后台，SockJS尝试首先使用原生的WebSockets。如果它失败了，它可以使用多种特定于浏览器的传输协议，并通过类似于网络的抽象来呈现它们。
SockJS旨在为所有现代浏览器和不支持WebSocket协议的环境工作——例如，在限制公司代理的后面。

简单来说SockJS是封装websocket协议的js库。

客户端使用：SockJS-client,
服务端可使用：SockJS-node

用法：

sockjs-client 的用法跟WebSocket协议的用法基本一样：

1.项目里面下载引用SockJS-client

npm install sockjs-client --save
import Sock from 'sockjs-client'

2.连接

const sock = new Sock(url);
// 连接成功后的回调函数
sock.onopen = () => {
  console.log('连接成功');
};

// 监听接受到服务器的消息
sock.onmessage = (event) => {
  console.log('收到的消息', event.data);
};

// 关闭连接的回调函数
sock.onclose = () => {

};

// 连接错误的回调函数
sock.onerror = (event) => {
  console.log('连接错误', event);
};

//发送消息
sock.send('test');
// 关闭连接
sock.close();

三、实践中遇到的问题

项目使用 vue-cli搭建，并使用了vue的状态管理vuex，websocket使用SockJS-client库

1.一个用户多个聊天组，收到的消息如何区分此条消息是包含于哪个聊天组？

-action.js文件

@params  nowGroupId:当前聊天的组id
         chatData:存放当前聊天组的消息内容
         
initSocket({ state }) {
    sock.onmessage = (event) => {
      const dataArr = JSON.parse(event.data);

      // 当前收到的消息如果属于当前聊天的组则添加进去
      if (dataArr.rId === state.nowGroupId) {
        state.chatData.push(JSON.parse(event.data));
      }
    };

};