react使用websocket实时通信方式

目录 使用websocket实时通信 创建公共组件 在react组件中的使用 websocket在不同情形下的使用 1.在react中使用websocket 2.websocket在小程序中使用

使用websocket实时通信

在react中使用websocket不需要引入其他库，只需要创建一个公共组件，封装一下websocket

创建公共组件

websocket.js

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
};

在react组件中的使用

1.react 函数组件的使用

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

2.react 类组件中的使用

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

如果一个连接，推送不同的消息如何处理？

1.需要安装 pubsub-js

2.修改webscocket.js 获取消息的代码

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

3.在组件中的使用

函数组件中的使用（在类组件中类似）

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

websocket在不同情形下的使用

1.在react中使用websocket

在项目根目录中创建一个websocket文件夹用于封装公用组件

代码如下：

/**
?* 参数：[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,
? }

这样就完成了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
? ? ? ? }
? ? }

2.websocket在小程序中使用

小程序官方文档里是有相关的组件和调用方法，所以这里就不详细介绍了，简单说一下我的理解和使用方法。

在项目根目录下创建websocket文件

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,
? ? ? success:(res)=>{
? ? ? ? console.log(res)
? ? ? }
? ? ?})
? ?},
? ? ?
?//关闭信道
? ?closeSocket(val) {
? ? ?if (app.globalData.socketStatus == 'connected') {
? ? ? ?wx.closeSocket({
? ? ? ? ?success: () => {
? ? ? ? ? app.globalData.socketStatus = 'closeds'
? ? ? ? ?}
? ? ? ?})
? ? ?}
? ?},
? ? ?
? //发送消息函数
? ?sendMessage(val) {
? ? ?if (app.globalData.socketStatus == 'connected') {
? ? ?//自定义的发给后台识别的参数 ，我这里发送的是name
? ? ? ?wx.sendSocketMessage({
? ? ? ? // ?data: "{\"name\":\"" + '123' + "\"}"?
? ? ? ? data: app.globalData.wsData
? ? ? ?})
? ? ?}
? ?},
? ?pdSocketOpen (val) {
? ? setTimeout(() => {
? ? ? if(app.globalData.socketStatus == 'closed'){
? ? ? ? // console.log(app.globalData.socketStatus)
? ? ? ? this.openSocket(val);
? ? ? }
? ? }, 4000)
? },
}
export {
? lqoWS,
}

使用

代码里的相关参数需要在全局中进行设置

import { lqoWS } from 'websoket/index';

let val = '/ownerSocket/';
? ? if(app.globalData.socketStatus == 'closed'){
? ? ? ? // that.openSocket();
? ? ? ? lqoWS.openSocket(val);
? ? }
? ? // lqoWS.closeSocket(val);
? ? lqoWS.sendMessage(val);
? ? lqoWS.pdSocketOpen(val);

小程序官方有非常详细的使用说明。 

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。 

查看更多关于react使用websocket实时通信方式的详细内容...