React中使⽤websocket连接
⾸先，我们知道在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 (adyState === 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 => {
<(e.message);
});
// 关闭时进⾏的操作
rws.addEventListener("close", () => {
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 ，执⾏⼀系列的操作了
ConnectWebsocket(name);
}
render() {
return (
<div>
<button
onClick={this.handleClick}
>aaaa</button>
</div>
);
}
}
const mapDispatchToProps = (dispatch, props) => {
return {
onConnectWebsocket: (name)=> {
// 这个这个⾏为注册到 dispath 中
dispatch(connectWebsocket(name));
前端websocket怎么用
}
};
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 (de === "200") {
//触发action ⾏为存⼊redux中
yield Data(result.list));
// 在这⾥进⾏ websocket 连接
yield tWebsocket(obj.name ));
}
}
} catch (e) {
yield (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 ，执⾏⼀系列的操作了  SetRequestConnect(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";
这个样⼦ 我们⼀整个 就进⾏连接起来了 在上⾯的

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。