当前位置:   article > 正文

react和redux使用websocket_react 使用 websocket

react 使用 websocket

    近期,小编在网上搜索各种资料,呕心沥血,终于初步在react中加入了websocket!长话短说,现在npm包结构的websocket很多,如果是node服务端,或者服务端用node做中间层,可以考虑socket.io,小编这里给大家介绍一种万金油的方案,sockjs-client和stompjs。sockjs-client用了1.0.0,stompjs用了2.2.3,需要后端配合,小编只写前端代码!代码和官方文档介绍的差不多,唯一不同的是我们需要一个断线重连,和储存socket建立链接后的实例,已经增加取消订阅!

     

    看到上图代码,聪明的你,有没有大彻大悟,瞬间有一种醍醐灌顶的感觉,看小编一席代码,是不是感觉以前都白活了!好了,不扯淡了,initstompClient只是初始化了一个实例对象,并且进行了设置,_this其实就是this,指针指向你的某个react组件,也就是说你在某个react组件中调用了wsConnectAndReconnect方法,然后把websocket实例赋予了组件中的stompClient变量,方便调用!至于定时器那段,其实就是个短线重连,防止用户因为网络原因链接不上!

     然后就是订阅和发送,这个就按照业务需求了,现在只需要把stompClient变量存储就好啦,于是我们想到了redux,具体代码就不贴了,大家把stompClient存储进redux,于是就变成了哪里想调用,就从哪里取了。当然,大家别忘了在不需要的时候及时断开websocket链接。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/煮酒与君饮/article/detail/770780
推荐阅读
相关标签
  

闽ICP备14008679号