react接入websocket

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

首先

封装一个websocket方法

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

然后

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

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

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

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

最后

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