封装一个webScoket请求
创建文件webScoket.tsx写入
import React, { Component } from 'react'
import { message } from 'antd'
import axios from 'axios'
export default class index extends Component {
render() {
return (
<></>
)
}
websocket: WebSocket | undefined;
componentDidMount(): void {
let that = this;
var websocket = null;
//判断当前浏览器是否支持WebSocket,是则创建WebSocket
if ('WebSocket' in window) {
console.log('浏览器支持Websocket');
websocket = new WebSocket(this.props.SocketURL);
this.websocket = websocket;
} else {
message.error('当前浏览器 Not support websocket');
}
//连接发生错误的回调方法
websocket.onerror = () => {
console.log('WebSocket连接发生错误');
message.error('WebSocket连接发生错误');
};
//连接成功建立的回调方法
websocket.onopen = () => {
const { getURL } = this.props;
axios.get(getURL);
};
//接收到消息的回调方法
websocket.onmessage = (event) => {
console.log(event);
if (event.data) {
console.log(event.data);
try {
const data = event.data;
const { onmessage } = this.props;
onmessage && onmessage(data);
}
catch {
console.log(event.data)
}
finally {
}
}
};
//连接关闭的回调方法
websocket.onclose = () => {
console.log('WebSocket连接关闭');
};
//如果websocket连接还没断开就关闭了窗口,后台server端会抛异常。
//所以增加监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接
window.onbeforeunload = function () {
that.closeWebSocket();
};
}
closeWebSocket() {
if (this.websocket) {
this.websocket?.close();
}
}
componentWillUnmount() {
this.closeWebSocket();
}
}
在另一个文件内 引入并调用
import React, { Component, useEffect, useState } from 'react'
import WebScoketUI from '@/components/webScoketUI'
function index(){
const [ListData, setListData] = useState([])
const onmessage = (data) => {
const data1 = JSON.parse(data);
const keys = Object.keys(data1);
let ListData = keys.map(item => {
return { title: item, list: data1[item] }
})
setListData(ListData);
}
return(
<WebScoketUI SocketURL='ws://10.143.12.7:8099/safeguard/websocket/crowd_counting'
getURL='/websocket/socket/safeguard/sendMsg/crowd_counting'
onmessage={onmessage}
/>
)
}
export default index