react加入websocket

晶片装饰画 發表於 2019-5-5 13:41:00

1、首先创建一个公共的组件，封装websocket
代码如下
<div class="cnblogs_code">
<pre>/**
* 参数： = func，
* timeout：连接超时时间
* @type {module.webSocket}
*/
module.exports =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));
 }
};
};</pre>
</div>
2、在我们的react项目中引入这个公共的组件
<div class="cnblogs_code">
<pre>import Socket from './index';

class websocket extends React.Component {
constructor() {
 super();
 this.taskRemindInterval = null;
}
componentDidMount = () => {
 // 判断专家是否登录
 this.socket = new Socket({
 socketUrl: 'ws://123.207.167.163:9010/ajaxchattest',
 timeout: 5000,
 socketMessage: (receive) => {
 console.log(receive);//后端返回的数据，渲染页面
 },
 socketClose: (msg) => {
 console.log(msg);
 },
 socketError: () => {
 console.log(this.state.taskStage + '连接建立失败');
 },
 socketOpen: () => {
 console.log('连接建立成功');
 // 心跳机制定时向后端发数据
 this.taskRemindInterval = setInterval(() => {
 this.socket.sendMessage({ "msgType": 0 })
 }, 30000)
 }
 });
　　　　　重试创建socket连接
 try {
 this.socket.connection();
 } catch (e) {
 // 捕获异常，防止js error
 // donothing
 }
}

}

export default websocket;</pre>
</div>
  
来源：https://www.cnblogs.com/houjl/p/10812519.html

頁: [1]

琼殿技术论坛's Archiver

react加入websocket