1. IT分享知识网首页

React中使用websocket连接

老牧童 • • 未分类 • 阅读 102

React中使用websocket连接ReactWebSocket

大家好，欢迎来到IT知识分享网。

首先,我们知道在js中使用websocket很简单,直接一个js文件里面就写好了,然后调用就是了,但是我们在react中要怎么使用呢,要用到它的action行为,和怎么进行websocket连接呢,好了,不说废话了,下面请看例子吧.

我们要进行websocket连接,首先我们要安装一个 reconnecting-websocket 插件

安装方式

npm install --save reconnecting-websocket

// 然后我们在项目中使用
import ReconnectingWebSocket from "reconnecting-websocket";
import { takeEvery, fork } from "redux-saga/effects";
import store from "./store";
import * as action from "../module/actions";

// 定义它的actionTypes
export const CONNECT_WEBSOCKET = "CONNECT_WEBSOCKET";
export const DISCONNECT_WEBSOCKET = "DISCONNECT_WEBSOCKET";
//定义它的action 行为
export const connectWebsocket  = (name) => ({ type: CONNECT_WEBSOCKET , name});
// 断开连接,你可以在退出登录时调用,或者时你离开你的模块时调用,都可以,看你自己的情况决定
export const disconnect = result=> ({ type: DISCONNECT_WEBSOCKET , result});

//定义 websocket connection
let options = {
   maxRetries: 5
};
// 把rws 定义在外面是方便断开连接
let rws = null;
// async 执行异步方法 
async function initWebsocket(obj) {
 
   let url = "你的url地址";
   // 建立websocket 连接
   rws = new ReconnectingWebSocket(url, [], options);

   rws.addEventListener("open", async () => {
       if (!rws) return;   
       // 这里可以拿到你传过来的 name
       let ticket = {
            "aaa": obj.name
        };

       if (rws.readyState === 1) {
          // 这个是你给websocket 传输它要的东西
           rws.send(JSON.stringify(ticket));
        }
    });

   rws.addEventListener("message", e => {
       if (e.data) {
       // 这里是你拿到数据后进行的处理
       //你可以调用action 来触发消息给页面上展示 例如 这些消息方法需要你自己来封装
       store.dispath(action.success(e.data))
      }
    });

   // 错误时进行的处理
   rws.addEventListener("error", e => {
       console.error(e.message);
    });
   // 关闭时进行的操作
   rws.addEventListener("close", () => {
       rws = null;
       console.info("asset service disconnected.");
    });
}

//来写sagas的处理方法 
function Connect(name) {
   initWebsocket(name);
}

function Disconnect(result) {
   // 为什么要使用while呢,因为我们的页面上有可能不只 创建了一个websocket连接
   while(rws) {
        rws.close(1000, result);
    }
}

function* connectSaga() {
   yield takeEvery(CONNECT_WEBSOCKET , Connect);
}
function* disconnectSaga() {
   yield takeEvery(DISCONNECT_WEBSOCKET , Disconnect);
}

export default function* root() {
   yield [
       fork(connectSaga),
       fork(disconnectSaga)
    ];
}

如果对redux-sagas 不太了解的同学 请参考官网

对react-redux 不太了解的话 请参考官网

接下来 在我们要用到页面 比如在下面这个页面 button 点击触发 websocket 连接

import React from "react";
import "../styles/style.less";
import { connect } from "react-redux";
// 拿到 connectWebsocket  这个行为
import rootSaga,{ connectWebsocket  } from "./websocket.js";
import createSagaMiddleware from "redux-saga";
// 记住 我们要使用 sagas 必须要先执行下 sagaMiddleware 不然是不会调用sagas的,更多的用法请参看官方手册  我就不多说了
const sagaMiddleware = createSagaMiddleware()
sagaMiddleware.run(rootSaga)

class Jobs extends React.Component {
   constructor(props) {
       super(props);
       this.state = {
        };
    }

   handleClick = () => {
		let name = "aaa";
		// 这里 我们就可以props了 他就会调用 上面的connectWebsocket ,执行一系列的操作了
		this.props.onConnectWebsocket(name);
   }
   render() {
       return (
           <div>
           		<button
           			onClick={this.handleClick}
				>aaaa</button>
           </div>
        );
    }
}

const mapDispatchToProps = (dispatch, props) => {
   return {
       onConnectWebsocket: (name)=> {
           // 这个这个行为注册到 dispath 中
           dispatch(connectWebsocket(name));
        }
};

export default connect(
   null,
   mapDispatchToProps
)(Jobs);

如果你想要在 方法调用成功后再 建立连接 可以这样子

import { put, call, takeLatest, fork } from "redux-saga/effects";
import { SETREQUESTCONNECT } from "./actionTypes";
// 这个是你模块的其他action
import * as actions from "./actions";
import { connectWebsocket  } from "./websocket.js";

function * requestConnect(obj) {
   try {
       const result = yield call(Api.fetch, obj.name );
       if (result && result.status) {
           if (result.status.code === "200") {
               //触发action 行为 存入redux中 
               yield put(actions.getData(result.list));
               // 在这里进行 websocket 连接
               yield put(actions.connectWebsocket(obj.name ));
            }         
       } 
    } catch (e) {
       yield put(actions.error(e.message));
    }
}

function* setRequestConnect() {
   // 这个 actionType 是你触发action 执行的 很难理解是吧 那请看一下 下面的解释 或许你就明朗很多了
   yield takeLatest(SETREQUESTCONNECT, requestConnect);
}

export default function* root() {
   yield  [
       fork(setRequestConnect),
    ];
}

比如在页面中

import { setRequestConnect } from "./action";
class Requst extends React.Component {
   constructor(props) {
       super(props);
       this.state = {
        };
    }

   handleClick = () => {
		let name = "aaa";
		// 这里 我们就可以props了 他就会调用 上面的connectWebsocket ,执行一系列的操作了
		this.props.onSetRequestConnect(name);
   }
   render() {
       return (
           <div>
           		<button
           			onClick={this.handleClick}
				>aaaa</button>
           </div>
        );
    }
}

const mapDispatchToProps = (dispatch, props) => {
   return {
       onSetRequestConnect : (name)=> {
           // 这个这个行为注册到 dispath 中
           dispatch(setRequestConnect(name));
        }
};

export default connect(
   null,
   mapDispatchToProps
)(Requst);

那我们的action的样子呢

import actionType from "./actionType";
export const setRequestConnect = (name) => {
	type: actionType.SETREQUESTCONNECT,
	name
}

那我们的actionType 的样子呢

export const SETREQUESTCONNECT = "SETREQUESTCONNECT";

这个样子 我们一整个 就进行连接起来了 在上面的

import { put, call, takeLatest, fork } from "redux-saga/effects";
import { SETREQUESTCONNECT } from "./actionTypes";
// 这个是你模块的其他action
import * as actions from "./actions";
import { connectWebsocket  } from "./websocket.js";

function * requestConnect(obj) {
   try {
       const result = yield call(Api.fetch, obj.name );
       if (result && result.status) {
           if (result.status.code === "200") {
               // 把数据放入中 然后进入reducer, 存在store书里面
               yield put(actions.getData(result.list));
               // 在这里进行 websocket 连接
               yield put(actions.connectWebsocket(obj.name ));
            }         
       } 
    } catch (e) {
       yield put(actions.error(e.message));
    }
}

function* setRequestConnect() {
   // 这个 actionType SETREQUESTCONNECT 就可以可以获取到上面那个dispatch的行为 从而可以 拿到obj.name 的值
   yield takeLatest(SETREQUESTCONNECT, requestConnect);
}

export default function* root() {
   yield  [
       fork(setRequestConnect),
    ];
}

但是请记住 仍然要在模块中执行一下  不然saga是不起作用的
import createSagaMiddleware from "redux-saga";
const sagaMiddleware = createSagaMiddleware()
sagaMiddleware.run(root)

好了,大概的用法就是这个样子的 下面的效果图

在这里插入图片描述

在这里插入图片描述

好了,react中使用websocket 大概就是这个样子了,有什么问题,欢迎指出哦,如果这篇文章 对你有用处,点个赞呗,谢谢

// 也可以简单的实现了
initWebsocket();

 function initWebsocket() { 
   
        let httpUrl = window.location.origin;
        if(httpUrl === "http://localhost:3000"){ 
   
            httpUrl = "http://192.168.60.100";
        }
        let wsUrl = httpUrl.replace(/^http:\/\//i, "ws://") + ":8044/vaData/2/1282619901093095424/1253141756640241664";

        let options = { 
   
            maxRetries: 3
        };
        console.log(wsUrl);
        let rws = new ReconnectingWebSocket(wsUrl, [], options);
        rws.addEventListener("message", (e) => { 
   
            if (e.data) { 
   
                let msgJson = JSON.parse(e.data);
                console.log(msgJson);
            }
        });
        rws.addEventListener("error", (e) => { 
   
            console.error(e.message);
        });
    
        rws.addEventListener("close", () => { 
   
            console.info("Message bus disconnected.");
        });
    }

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/21326.html

赞 (0)
老牧童老牧童
0

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信