浅聊 webSocket (干货)

如果可以实现记得点赞分享，谢谢老铁～

一，什么是websocket

WebSocket是HTML5下一种新的协议（websocket协议本质上是一个基于tcp的协议）

它实现了浏览器与服务器全双工通信，能更好的节省服务器资源和带宽并达到实时通讯的目的

Websocket是一个持久化的协议

二，websocket的原理

websocket约定了一个通信的规范，通过一个握手的机制，客户端和服务器之间能建立一个类似tcp的连接，从而方便它们之间的通信

在websocket出现之前，web交互一般是基于http协议的短连接或者长连接

websocket是一种全新的协议，不属于http无状态协议，协议名为"ws"

三，上代码

1.你需要创建一个工具类。webSocket.js

let apiUrl;

if (location.host.toLowerCase().indexOf('localhost') !== -1) {

apiUrl = 'ws://192.168.xx.xxx:8000/ws/;

} else {

apiUrl = `ws://${location.host.toLowerCase()}/ws/tuisong`;

}

const webSocketSetting = {
	url: apiUrl, // 测试
};

export default webSocketSetting;

2.在你的业务代码里面开始导入

import webSocketSetting from '@/services/webSocket';

// 推送
const connectWebStocket = () => {
 const token: any = localStorage.getItem('token');
  if (token) {
    ws = new WebSocket(`${webSocketSetting.url}?token=${token}`);
      ws.onopen = function (evt) {
        console.log('Connection success ...');
      };
      ws.onmessage = function (evt) {
        const data = JSON.parse(evt.data);

        if (data) {
          //todo 
        } else {
          message.destroy();
          message.error(data?.message);
        }
      };
      ws.onclose = function (evt) {
        console.log('Connection closed.');
      };
   }
};

3.最后在你的启动生命周期挂载就好了，记得关闭websoket

useEffect(() => {
	connectWebStocket();
	if (ws) {
		return () => ws.close();
  }
},[]);