React中使用websocket连接

版权声明：不支持转发 https://blog.csdn.net/hl971115/article/details/89764692

首先,我们知道在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 { 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(rootSaga)

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

好了,react中使用websocket 大概就是这个样子了,有什么问题,欢迎指出哦,大家一起进步,哈哈哈