【websocket定义和使用】

---

前言

websocket就是服务端和客户端建立长连接的一种方式，多在直播，弹幕，聊天业务中使用，具体的自己百度吧~~~

---

一、websocket定义

代码如下（示例）：

function mgSocket(){
    var ws;
    this.connect = (url)=>{
        ws = new WebSocket(url);
        ws.onclose =  () => {
            console.log('关闭连接');
           // this.reconnect(url)
        };
        ws.onerror =  () => {
            console.log('错误连接');
            this.reconnect(url)
        };
        ws.onopen = () => {
            //连接成功
            console.log('connect ready');
            this.onopen()
        };
        ws.onmessage =  (event) => {
            //收到数据
            this.onmessage(event);
        }
    }
    this.onopen = ()=>{

    }
    this.onmessage = (event)=>{
       
    }
    this.send=(msg)=>{
        ws.send(msg); 
    }
    //重连
    this.reconnect = (url) => {
        setTimeout( () => {     //没连接上会一直重连，设置延迟避免请求过多
            this.createWebSocket(url);
        }, 10000);
    }
    // 实例websocket
    this.createWebSocket = (url) => {
        console.log('开始连接'); 
        console.log(url); 
       
     
       
        try {
            if ('WebSocket' in window) {
                ws = new WebSocket(url);
            } else if ('MozWebSocket' in window) {
                ws = new MozWebSocket(url);
            } else {
                alert("当前浏览器不支持websocket协议",3000)
            }
            this.initEventHandle(url);
        } catch (e) {
            this.reconnect(url);
        }
    }
    // 初始化事件函数
    this.initEventHandle = (url) => {
        ws.onclose =  () => {
         //   this.reconnect(url);
        };
        ws.onerror =  (err) => {
            this.reconnect(url);
        };
        ws.onopen = () => {
            //连接成功
            console.log('connect ready');
            this.onopen()
        };
        ws.onmessage =  (event) => {
            //收到数据
            this.onmessage(event);
        }
    }

}

module.exports = {
    mgSocket: mgSocket,
}

# 二、使用步骤
## 1.引入库
代码如下（示例）：

```c
import numpy as np
import pandas as pd
import matplotlib.pyplot as plt
import seaborn as sns
import warnings
warnings.filterwarnings('ignore')
import  ssl
ssl._create_default_https_context = ssl._create_unverified_context

2.websocket使用

代码如下（示例）：

import SOCKET from "../api/socket";
socket() {
      let mgsocket = new SOCKET.mgSocket();
      let userId = window.localStorage.getItem("userId")
        ? window.localStorage.getItem("userId")
        : "";
      let time = Date.parse(new Date());
      let deviceID = window.localStorage.getItem("deviceId");
      //接口秘钥
      let source = deviceID + time + "*&~@!#()^%$+w_x2879879";
      let url =
        CONFIG.wsURL +
        "?deviceId=" +
        deviceID +
        "&timestamp=" +
        time +
        "&sign=" +
        md5(source) +
        "&userId=" +
        userId;
      console.log(url);
      mgsocket.connect(url);

      mgsocket.onopen = () => {
        let data = {
          data: {
            deviceId: deviceID,
            eventType: 0,
            type: 1,
            userId: userId
          }
        };
        //mgsocket.send(JSON.stringify(data))
        setInterval(() => {
          mgsocket.send(JSON.stringify(data));
        }, 15000);
      };
      mgsocket.onmessage = event => {
        // console.log('收到服务器消息:',event.data);
        let data = JSON.parse(event.data);
        console.log('解析服务器消息:',data);
        if(data.eventType==3){
          switch(data.msg.msgType){
            case "3-14": //开始游戏
            
              break;
            case "3-4":
           
              break;
            case "3-5":
             
               
              break;
          }
        }

        try {
          if (data.msg.msgType == "1") {
            if (data.msg.maintainRemainTime == 15) {
            }
            if (data.msg.maintainRemainTime == 30) {
            }
          }
        } catch (e) {}
      };
    },

总结

仅供参考，有问题自己解决（本人也很菜），最终解释权归本人所有！！！！