React WebSocket 发送消息

最新推荐文章于 2025-04-15 18:34:45 发布

君归处尽千帆

最新推荐文章于 2025-04-15 18:34:45 发布

阅读量1.4k

点赞数

分类专栏：前端文章标签： react.js websocket 前端

本文链接：https://blog.youkuaiyun.com/codeJungui/article/details/125695843

版权

前端专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在React应用中使用WebSocket实现消息的接收和发送。首先，展示了仅接收消息的基本设置，包括安装依赖和组件使用。然后，详细讲解了如何通过自定义组件实现发送消息功能，包括错误处理、重连机制，并提供了组件的完整代码示例。最后，给出了在页面中引入并使用此组件的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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)
    }}
/>