react接入websocket

2020年1月3日22:23:30 发表评论 阅读(24)

react接入websocket

最近在写的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中消息数据的长度,然后拿添加的最后一条数据,不然的话,总是会把所有数据拿过来,页面就会展示一些重复的数据。

 

 

weinxin
微信小程序
互联网开发,终身学习者,欢迎您的关注!
舍得

发表评论

不高兴 彩虹 吃瓜 丢翔 乖 滑稽 花心 惊哭 惊讶 挤眼 酷 伤心 帅吗? 礼物 玫瑰 怒 生气 喷 睡觉 太开心 小九九 啊
太阳 吐舌 委屈 笑眼 星星月亮 心碎 咦 阴险 疑问 真棒 偷笑 斜眼笑 震惊 略 哈欠 无奈哭 抠鼻 哼 期待 懒得理你 爱心 蜡烛