React 项目如何集成 socket.io？

Question

socket-client 初始化后，只能在当前组件使用io对象。

如果我想在其他组件中也使用io对象，重新io('')是肯定不可取的。

其实这个问题有点类似于：如何把初始化后的io对象当做组件全局共享变量？

Answer 1

写个类进行 soket.io 进行实例化。实例化后放在全局的公共状态管理进行管理就行了。如果是单纯的H5项目最简答明了就是丢到 window.socketIo = new app 。APP端就放在redux或者其他公共状态管理

Answer 2

用的时候引入一下这个文件即可

import io from 'socket.io-client';

let client = null;

export default function() {
    if(client !== null){
        return client;
    }
    return client = io('xxx');
}

Answer 3

初始化后放在redux里

Answer 4

只在入口文件（app.js）创建一个socket实例,各个组件处通过event订阅

// 下图已vue为例，Vue有自带的$emit $on, react可以引event.js

creatWebsocket(){

   let url \= window.location.hostname \=='localhost'?'http://localhost:3000':window.location.origin

   this.socket \=  socket\_io(url,{

   query:{

   token:this.user.token

   },

   reconnection:true,

   reconnectionDelay:100000,

   reconnectionDelayMax:10000

   })

   this.socket.on('connect',()\=>{

   console.log('前端连接成功')

   })

   this.socket.on('disconnect',function(){

   console.log('断开')

   })

   this.socket.on('error',function(data){

   console.log('前端链接失败')

   console.log(data)

   })

   this.socket.on('msg',(data)\=>{

   console.log('新消息')

   console.log(data)

   if(data.method\=='listAlerts'){

   wsPush.GlobalEvent.$emit(this.$events.UPDATE\_DEVICE\_ALERT);

   }

   if(data.method\=='listOneWaitForDealTrackInstances'){

   wsPush.GlobalEvent.$emit(this.$events.UPDATE\_AGENCY\_THING);

   }

   if(data.method\=='listTrackMessage'){

   wsPush.GlobalEvent.$emit(this.$events.UPDATE\_SYSTEM\_NOTICE);

   }

   })

}