react封装一个webScoket请求_antd react websocket

封装一个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