react使用websocket实时通信方式
更新时间：2022年09月15日 11:45:08 作者：xffff00
这篇文章主要介绍了react使用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 项目迁移 Webpack Babel7的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要为大家详细介绍了react实现Modal弹窗效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
数据的受控控制一直是react里的一个痛点,当我想要实现一个输入框的受控控制时,我需要定义一个onChange和value,手动去实现数据的绑定,本文小编给大家介绍了react表单受控的实现方案,需要的朋友可以参考下2023-12-12
ReactNative错误采集原理在Android中实现详解
这篇文章主要为大家介绍了ReactNative错误采集原理在Android中实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
本文主要介绍了React Native Popup实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-05-05
我们项目中通常会需要引入字体,所以下面这篇文章主要给大家介绍了关于如何在React项目中引入字体文件并使用的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下2022-08-08
简单来说就是使用自定义hook可以将某些组件逻辑提取到可重用的函数中。 自定义hook是一个从use开始的调用其他hook的Javascript函数，下面看下react中创建自定义hooks的相关知识，感兴趣的朋友一起看看吧2021-11-11
react性能优化达到最大化的方法 immutable.js使用的必要性
这篇文章主要为大家详细介绍了react性能优化达到最大化的方法，一步一步优化react性能的过程，告诉大家使用immutable.js的必要性，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
这篇文章主要介绍了React Hook四种组件优化总结，文章围绕主题展开详细的内容介绍，具有一定的参考价孩子，需要的朋友可以参考一下2022-07-07
react开发中如何使用require.ensure加载es6风格的组件
本篇文章主要介绍了react开发中如何使用require.ensure加载es6风格的组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
最新评论