最近在写的react中使用websocket来进行通信,今天算是给搞定了,写篇文章来记录一下。
首先
封装一个websocket方法
在方法中调用这几个回调函数onopen
/onmessage
onerror
/onclose
,关于websocket的详细说明,这里推荐阮老师的文章:WebSocket教程
然后
在聊天页面,将需要发送的文字,通过函数传值传给websocket实例,在onopen回调函数中调用websocket实例的send方法发送给服务器。
接收方接收websocket服务器响应的数据,在react中,我是将接收到的websocket数据存储在了redux
中,然后使用redux的subscribe函数
来订阅store的变化,当监听到store变化的时候,来做出一些操作。
比如,当打开聊天页面的时候,默认渲染的是两个人的聊天数据,这个数据是从接口返回的数据中拿到的,并将拿到的聊天数据存储在newsList(newsList是一个变量),并通过map方法渲染到页面上。
我这里是将websocket中拿到的数据,使用concact方法连接newsList这个数组变量,通过改变state的数据,触发组件重新渲染,实现动态发送内容的效果。
最后
我们在拿到websocket响应的数据后需要进行一下判断,判断什么呢?判断我们存在redux中消息数据的长度,然后拿添加的最后一条数据,不然的话,总是会把所有数据拿过来,页面就会展示一些重复的数据。
微信小程序
互联网开发,终身学习者,欢迎您的关注!