浅聊 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();
  }
}, []);