react使用websocket实时通信_react使用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
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

在react组件中的使用

1、react 函数组件的使用

import {createWebSocket,closeWebSocket} from './websocket';
const Element=(param)=>{
	useEffect(()=>{
		let url="";//服务端连接的url
		createWebSocket(url)
		//在组件卸载的时候，关闭连接
		 return ()=>{
            closeWebSocket();
        }
	})
}
1
2
3
4
5
6
7
8
9
10
11

2、react 类组件中的使用

import {createWebSocket,closeWebSocket} from './websocket';
....
componentDidMount(){
 	let url="";//服务端连接的url
	createWebSocket(url)
 }
 componentWillUnmount(){
	 closeWebSocket();
}
....
1
2
3
4
5
6
7
8
9
10

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

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 为发布的消息
   }
   ...
1
2
3
4
5
6
7
8
9

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

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