react使用websocket实时通信方式_React_

let websocket, lockReconnect = false; let createWebSocket = (url) => {     websocket = new WebSocket(url);     websocket.onopen = function () {        heartCheck.reset().start();     }     websocket.onerror = function () {         reconnect(url);     };     websocket.onclose = function (e) {         console.log('websocket 断开: ' + e.code + ' ' + e.reason + ' ' + e.wasClean)     }     websocket.onmessage = function (event) {         lockReconnect=true;         //event 为服务端传输的消息，在这里可以处理     } } let reconnect = (url) => {     if (lockReconnect) return;     //没连接上会一直重连，设置延迟避免请求过多     setTimeout(function () {         createWebSocket(url);         lockReconnect = false;     }, 4000); } let heartCheck = {     timeout: 60000, //60秒     timeoutObj: null,     reset: function () {         clearInterval(this.timeoutObj);         return this;     },     start: function () {         this.timeoutObj = setInterval(function () {             //这里发送一个心跳，后端收到后，返回一个心跳消息，             //onmessage拿到返回的心跳就说明连接正常             websocket.send("HeartBeat");         }, this.timeout)     } } //关闭连接 let closeWebSocket=()=> {     websocket && websocket.close(); } export {     websocket,     createWebSocket,     closeWebSocket };

import {createWebSocket,closeWebSocket} from './websocket'; const Element=(param)=>{     useEffect(()=>{         let url="";//服务端连接的url         createWebSocket(url)         //在组件卸载的时候，关闭连接          return ()=>{             closeWebSocket();         }     }) }

import {createWebSocket,closeWebSocket} from './websocket'; .... componentDidMount(){      let url="";//服务端连接的url     createWebSocket(url)  }  componentWillUnmount(){      closeWebSocket(); } ....

import { PubSub } from 'pubsub-js'; ...  websocket.onmessage = function (event) {         lockReconnect=true;         //event 为服务端传输的消息，在这里可以处理         let data=JSON.parse(event.data);//把获取到的消息处理成字典，方便后期使用         PubSub.publish('message',data); //发布接收到的消息 'message' 为发布消息的名称，data 为发布的消息    }    ...

import { PubSub } from 'pubsub-js'; useEffect(()=>{     //订阅 'message' 发布的发布的消息     messageSocket = PubSub.subscribe('message', function (topic,message) {          //message 为接收到的消息  这里进行业务处理     })     //卸载组件 取消订阅     return ()=>{           PubSub.unsubscribe(messageSocket);      } }

/**  * 参数：[socketOpen|socketClose|socketMessage|socketError] = func，[socket连接成功时触发|连接关闭|发送消息|连接错误]  * timeout：连接超时时间  * @type {module.webSocket}  */ class webSocket {     constructor(param = {}) {         this.param = param;         this.reconnectCount = 0;         this.socket = null;         this.taskRemindInterval = null;         this.isSucces=true;     }     connection = () => {         let {socketUrl, timeout = 0} = this.param;         // 检测当前浏览器是什么浏览器来决定用什么socket         if ('WebSocket' in window) {             console.log('WebSocket');                          this.socket = new WebSocket(socketUrl);         }         else if ('MozWebSocket' in window) {             console.log('MozWebSocket');             // this.socket = new MozWebSocket(socketUrl);         }         else {             console.log('SockJS');                          // this.socket = new SockJS(socketUrl);         }         this.socket.onopen = this.onopen;         this.socket.onmessage = this.onmessage;         this.socket.onclose = this.onclose;         this.socket.onerror = this.onerror;         this.socket.sendMessage = this.sendMessage;         this.socket.closeSocket = this.closeSocket;         // 检测返回的状态码 如果socket.readyState不等于1则连接失败，关闭连接         if(timeout) {             let time = setTimeout(() => {                  if(this.socket && this.socket.readyState !== 1) {                      this.socket.close();                  }                  clearInterval(time);             }, timeout);         }     };     // 连接成功触发     onopen = () => {         let {socketOpen} = this.param;         this.isSucces=false  //连接成功将标识符改为false         socketOpen && socketOpen();     };     // 后端向前端推得数据     onmessage = (msg) => {         let {socketMessage} = this.param;         socketMessage && socketMessage(msg);         // 打印出后端推得数据         console.log(msg);     };     // 关闭连接触发     onclose = (e) => {         this.isSucces=true   //关闭将标识符改为true         console.log('关闭socket收到的数据');         let {socketClose} = this.param;         socketClose && socketClose(e);         // 根据后端返回的状态码做操作         // 我的项目是当前页面打开两个或者以上，就把当前以打开的socket关闭         // 否则就20秒重连一次，直到重连成功为止          if(e.code=='4500'){             this.socket.close();         }else{             this.taskRemindInterval = setInterval(()=>{                 if(this.isSucces){                     this.connection();                 }else{                     clearInterval(this.taskRemindInterval)                 }             },20000)         }     };     onerror = (e) => {         // socket连接报错触发         let {socketError} = this.param;         this.socket = null;         socketError && socketError(e);     };     sendMessage = (value) => {         // 向后端发送数据         if(this.socket) {             this.socket.send(JSON.stringify(value));         }     }; }; export {     webSocket,   }

import {webSocket} from "../../WebSocket/index"; //函数调用 WebSocketTest=()=>{         //    判断专家是否登录         let that = this;         let userId = JSON.parse(localStorage.getItem("adminInfo")).id;         console.log(userId)         this.socket = new webSocket({             socketUrl: 'ws://xx.xxx.xxx/imserver/'+userId,             timeout: 5000,             socketMessage: (receive) => {                 console.log(receive)                 // if(receive.data === '1'){                 //     console.log(receive);  //后端返回的数据，渲染页面                 // }else if(JSON.parse(receive.data)){                 //     that.setState({msgData:receive.data})                 // }else{                 //     message.info("有新消息了")                 // }                 try {                     if (typeof JSON.parse(receive.data) == "object") {                         that.setState({msgData:receive.data})                     }else if(receive.data === '1'){                         console.log(receive.data);                     }                 } catch(e) {                     message.info(receive.data)                 }             },             socketClose: (msg) => {                 console.log(msg);             },             socketError: () => {                 console.log(this.state.taskStage + '连接建立失败');                 message.error("消息通信连接失败，建议刷新")             },             socketOpen: () => {                 console.log('连接建立成功');                 // 心跳机制 定时向后端发数据                 this.taskRemindInterval = setInterval(() => {                     this.socket.sendMessage({ "msgType": 0 })                 }, 30000)             }         }); 　　　　//重试创建socket连接         try {             this.socket.connection();         } catch (e) {             // 捕获异常，防止js error             // donothing         }     }

const app = getApp(); import { webSocketUrl } from '../utils/requst/url'; //websocket封装模块 const lqoWS = {   openSocket(val) {     let wsData = app.globalData.wsData;     //我这里向后端传参用的路径参数，所以这里稍微设置一下     let urls = ''     if(val == '/userSocket/'){       urls = webSocketUrl + val + wsData.id     }     if(val == '/ownerSocket/'){       urls = webSocketUrl + val + wsData.id + '/' + wsData.lon + '/' + wsData.lat;     }     //打开时的动作      wx.onSocketOpen(() => {        console.log('WebSocket 已连接')        app.globalData.socketStatus = 'connected';        this.sendMessage(val);      })      //断开时的动作      wx.onSocketClose(() => {        console.log('WebSocket 已断开')        if(app.globalData.socketStatus == 'closeds'){         return       }        app.globalData.socketStatus = 'closed';        this.pdSocketOpen(val);      })      //报错时的动作      wx.onSocketError(error => {        console.error('socket error:', error)      })      // 监听服务器推送的消息      wx.onSocketMessage(message => {       //把JSONStr转为JSON       message = message.data.replace(" ", "");         if (typeof message != 'object') {             message = message.replace(/\ufeff/g, ""); //重点             var jj = JSON.parse(message);             message = jj;         }        console.log(message)      })      // 打开信道      wx.connectSocket({       url: urls
                
提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                
                

                

                                            
上一篇：vue如何设置动态的栅格占位、水平偏移量、类名、样式_vue.js_
                                                                
下一篇：React 组件性能最佳优化实践分享_React_