React 使用 websocket 获取数据

React 使用 websocket 获取数据

适用于实时数据，避免轮巡查询资源持续占有

1. 安装依赖

npm install react-stomp
// 或者
yarn add react-stopm

2. 引入资源

import SockJsClient from 'react-stomp'

3.获取数据

• 首先你要有一个后端提供或者自己测试用的订阅地址
• 还需要一个订阅“主题”
• 请留意以下代码中注释部分

// 订阅成功后接收消息的回调函数
onMessage = (msg, topic) => {
  // 可以进行后续的逻辑处理
  console.log(msg, topic)
}

render () {
  return (
    <div className={previewClassName}>
        <SockJsClient
          url='http://xxxxxxxxxx' // 订阅地址
          topics={[`/xxxxx/${xxxxxx}`]}  // 订阅主题
          onMessage={this.onMessage}  // 接收到消息的回调，可以写回调函数
          onDisconnect={(err) => { console.log('连接失败') }}
        />
    </div>
     )
}