1、实现效果

2、简单接收消息

只进行简单的接收消息，没有发送信息的需求。以下操作足够。如果需要发送信息。无需以下操作。

2.1、导入依赖

npm install react-websocket
	或 yarn add react-websocket

2.2 引入组件

import React from react;
import Websocket from react-websocket;

class ReactWebsocket extends React.Component {
          
   
  render() {
          
   
    return (
      <Websocket 
      		// 输入自己的url
        url="ws://127.0.0.1:8080/api/pushMessage/001"  
        onMessage={
          
   (msg:any)=>{
          
       
          console.log(msg)								// 接收消息
        }}
        // 其余属性省略（具体配置看源码）
        />
    );
  }
}

export default ReactWebsocket;

3、发送消息

如果需要发送信息，上述组件没有暴露发送信息的函数，所以发送信息就会比较麻烦。下文我重写了上述组件，实现了开头的效果。无需导入 react-websocket 包，只需复制以下代码，按照需求小改即可。

import React from react;
import {
          
    Input,message  } from antd;
import PropTypes from prop-types;
const {
          
    Search } = Input;


/**
 * 封装 ReactWebsocket
 */
 // 自己的url
const url="ws://127.0.0.1:8080/api/pushMessage/001"
// 是否重连
const reconnect=false
const reconnectIntervalInMilliSeconds=1000

class ReactWebsocket extends React.Component{
          
   
    constructor(props) {
          
   
        super(props);
        this.state = {
          
   
            ws:new WebSocket(url),
            reconnect:reconnect,
        };
        this.sendMessage = this.sendMessage.bind(this);
        this.setupWebsocket = this.setupWebsocket.bind(this);
    }

    sendMessage(msg) {
          
   
        this.state.ws.send(msg)
        message.info("消息已发送！")
        }

    setupWebsocket() {
          
   
        this.state.ws.onopen = () => {
          
   
            console.log("开启websocket")
            this.state.ws.send("客户端websocket已开启" )
        }
        this.state.ws.onerror=e=>{
          
   
            console.log("发生错误："+e)
        }
        this.state.ws.onmessage=evt=>{
          
   
            this.props.onMessage(evt.data);
        }

        this.state.ws.onclose=evt=>{
          
   
            console.log("Websocket关闭连接，原因：}"+evt.reason+"错误代码："+evt.code)
        }
        if(reconnect){
          
   
            console.log("正在重新连接")
            this.timeoutID= setTimeout(() => {
          
   
                this.setState({
          
   
                    ws: new WebSocket(url)
                });
                this.state.ws.onopen = () => {
          
   
                    console.log("重启websocket")
                }
            }, reconnectIntervalInMilliSeconds);
        }
    }
    
    componentDidMount() {
          
   
        this.setupWebsocket();
    }
    componentWillUnmount() {
          
   
        this.state.ws.close()
    }

    render() {
          
   
        // 以下的自己改
        return <Search
                placeholder="输入消息"
                allowClear
                enterButton="点击发送"
                size="large"
                onPonPressEnter={
          
   (message) => {
          
   
                    this.sendMessage(message)
                }}
                onSearch={
          
   (message) => {
          
   
                    this.sendMessage(message)
                }}
            />
    }
}
ReactWebsocket.propTypes = {
          
   
    onMessage: PropTypes.func.isRequired,
};
export default ReactWebsocket;

在页面引入上述组件：

<ReactWebsocket
   onMessage={
          
   (msg:any)=>{
          
   
        message.info("收到消息："+msg)
    }}
/>

ok