前言

这几天在做的一个需求，就是要写一个小程序端的页面，用于跟客服聊天。
然后就用到了websocket技术，以前我做过网页版的，但是做小程序后发现网页版的逻辑放过来没问题，但是很多的方法和api是不生效的，所以又查文档专门看了一下对于的api，踩了一些坑后来记录一下，方便下次复制！

pc端聊天功能模板（自带websocket，复制可直接用）

点击这里跳转
效果图

功能简介

1，页面信息展示，根据后台返回字段，分左边和右边展示
2，输入后点击发送按钮，可以发送消息，通过websocket传给后台
3，进入页面后链接websocket
4，websocket自带心跳重连设置，如果异常或者断开会一直重连，直到连上为止
5，离开页面时可以断开连接，并终止重连请求
6，登录和离线会给后端发送type为online的信息，0代表离线，1代表在线
7，页面滚动事件监听，当滚动条滚动到顶部时会触发方法
8，历史数据功能，进入页面后拉取历史数据
9，发送信息时滚动条永远保持在最底部

效果图

这是链接后台websocket，聊天的页面样式

后端历史记录的数据结构，分左右

代码(整体代码放上)

放下翻，有写注意事项和逻辑，里面详细解释了一下这个代码的功能实现逻辑和注意项

注意点

1，点击发送时，我们看到的并不是后台传过来的信息，是我们自己push进去的，然后信息通过websockt传给后台了，这样就不需要再获取一次消息了。
2，我这里后台的数据结构时分左右的，然后左右的不同也会有不同的字段，所以我标签上有判断，如果你们后端不这么传，自行更改
3，这里用css保留了空格等格式，如果不生效，可以直接用vue自带的v-html来把文字放进去

聊天功能逻辑简介

简单来说就是，我们前端的页面渲染是通过写两个style样式。一个是靠左边，一个靠右边。然后通过后台的数据内有一个position字段，是left我们就调用左边的样式，是right的就调用右边的样式。这样，页面就出来了。
然后我们通过websocket链接交互。
逻辑是，刚连接上时发送给后台当前用户的信息（type=login）和这个用户上线了的状态（type=online），然后发送消息的时候type=chat，并带上参数。参数为我的信息和我要发送的人的信息。然后接收的时候我们通过判断后台websocket传过来的数据内type等于什么来处理不同的数据。这一点需要你自行和后端商量什么type。然后离开页面的时候也发送一下type=online的消息，表示用户离线了。然后关闭链接

拓展项

【用户登录状态，在线离线】
这里我写了一个pc版的在线和离线。代码放上来讲解一下。
这里是截取的代码，是用来渲染用户列表的，是pc端截取出来的。大家看逻辑就行，这里用户列表自带状态显示上下线，所以我分了两个盒子来判断。
逻辑很简单，就是两个盒子，先判断当前这个用户的id和后台websocket发来的id是否一致。如果不一致，那么我们使用上面的盒子，也就是用户列表内自带的字段来判断上下线。
如果后台发了一个上下线的状态过来，我们就赋值给online_uid。这时候再判断，就会发现用户列表内某一个用户id是一致的，这时候这个用户就会使用下面的盒子，判断就变成了后台发送过来的状态来判断上下线了。

html

 在线
 离线


 在线
 离线

data

data() {return {online_type:0,//0是离线，1是在线online_uid:0,//用于判断uid是否一致};},

methods

            //接受后台信息回调onmessage(e) {let type = JSON.parse(e.data)if (type.type == 'reply') {//reply代表用户发送的消息this.userInfoList.push(type.data)//把发送的消息添加进信息列表渲染}else if(type.type == 'online'){//online代表用户上下线this.online_type=type.data.online//用户状态this.online_uid=type.data.uid//用户id}console.log("收到后台信息：", JSON.parse(e.data));},

【发送图片，视频，商品详情等信息】
这里是很多聊天功能会拓展的部分，不可能只发送文字，目前我还没有写代码，先记录逻辑。

还记得我们上面代码里面发送消息的时候是有type=text这个属性吗，我们就通过这个type来区分。
比如我点击上传图片时，方法内给type改成img。那么后端发给我们，也就是img类型的，我们通过这个判断来完成功能，简单描述一下

消息分类：
1，text：文字信息
2，img：图片信息
3，shop：购物信息
4，video：视频信息
逻辑：position分左右不用动，创建四个div。用v-if来判断type类型属于哪一个就显示哪个div。同时，每个div内对应获取信息列表中该对象的一些字段渲染出来，比如type等于text就代表是文字信息，拿msn字段的文字去渲染。如果type等于img。就是图片信息，图片的这个div内获取url字段的图片地址去渲染。如果是shop字段。那么就对应获取比如名称，描述，价格，图片等字段渲染出来一个小卡片形式的结构。