本文作者:DurkBlue

react如何接入websocket?推荐

react如何接入websocket?摘要: 最近在写的react中使用websocket来进行通信,今天算是给搞定了,写篇文章来记录一下。首先封装一个websocket方法在方法中调用这几个回调函数onopen/onmess...

react如何接入websocket? 第1张

最近在写的react中使用websocket来进行通信,今天算是给搞定了,写篇文章来记录一下。

首先

封装一个websocket方法

在方法中调用这几个回调函数onopen/onmessageonerror/onclose,关于websocket的详细说明,这里推荐阮老师的文章:WebSocket教程

然后

在聊天页面,将需要发送的文字,通过函数传值传给websocket实例,在onopen回调函数中调用websocket实例的send方法发送给服务器。

接收方接收websocket服务器响应的数据,在react中,我是将接收到的websocket数据存储在了redux中,然后使用redux的subscribe函数来订阅store的变化,当监听到store变化的时候,来做出一些操作。

比如,当打开聊天页面的时候,默认渲染的是两个人的聊天数据,这个数据是从接口返回的数据中拿到的,并将拿到的聊天数据存储在newsList(newsList是一个变量),并通过map方法渲染到页面上。

我这里是将websocket中拿到的数据,使用concact方法连接newsList这个数组变量,通过改变state的数据,触发组件重新渲染,实现动态发送内容的效果。

最后

我们在拿到websocket响应的数据后需要进行一下判断,判断什么呢?判断我们存在redux中消息数据的长度,然后拿添加的最后一条数据,不然的话,总是会把所有数据拿过来,页面就会展示一些重复的数据。

此篇文章由DurkBlue发布,麻烦转载请注明来处
文章投稿或转载声明

来源:DurkBlue版权归原作者所有,转载请保留出处。本站文章发布于 2020-02-07
温馨提示:文章内容系作者个人观点,不代表DurkBlue博客对其观点赞同或支持。

赞(1)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享

发表评论取消回复

快捷回复:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog

评论列表 (暂无评论,1941人围观)参与讨论

还没有评论,来说两句吧...