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