React WebSocket 发送消息

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