微信小程序微信小程序websocket实现即时聊天功能实现即时聊天功能
主要为大家详细介绍了微信小程序websocket实现即时聊天功能，具有一定的参考价值，感兴趣的小伙伴们可以
参考一下
今天给大家分享一下本人做小程序使用websocket的一点小经验，希望对大家有所帮助。
使用之前肯定首先要了解一下websocket是什么，简单来讲websocket就是客户端与服务器之间专门建立的一条特殊通道，请
求只需要请求一次，而且还可以从通道实时获取服务器数据，非常适合应用到实时应用上。
因为这里本人是分享小程序，所以就不去深究websocket的底层和协议了，感兴趣的朋友可以去看下websocket协议
建议大家在做之前先看看微信小程序官方提供的api关于websocket的文档，因为微信的websocket接口虽然和HTML5的
websocket基本一样但是语法上还是有少许偏差，了解一下还是很有必要的。
话不多说上代码（css代码就不贴了，就是一些简单的聊天样式排版）
wxml
<view>
<scroll-view scroll-y="true" scroll-with-animation="true" scroll-x="false" scroll-into-view="list-{{idx}}" class="twnav">
<view class='twChild'>
<!-- <text>视频聊天室</text> -->
<view class='tellRoom' wx:for="{{tellData}}" wx:for-index="idx" wx:for-item="li" wx:key="li" id='list-{{li.id}}'>
<view class='myHead'>
<image class='sayHead' wx-if='{{li.type=="question"||li.type=="message"}}' src='{{li.avatarurl}}'></image>
<image class='sayHead' wx-if='{{li.type=="answer"}}' src='{{li.content.orgLogo}}'></image>
</view>
<view class='tellDetail'>
<text class='name' wx-if='{{li.type=="question"||li.type=="message"}}'>{{li.displayName}}:</text>
<text class='name' wx-if='{{li.type=="answer"}}'>{{li.content.orgName}}回复{{li.displayName}}:</text>
<view wx-if='{{li.type=="answer"}}' class='answer'>
<view class='anQue'>{{li.content.question}}</view>
<view class='anAn'>{{li.content.answer}}</view>
</view>
<image wx-if='{{li.type=="question"}}' class='question' src='../../image/icon_quiz@2x.png' mode='widthFix'></image>
<text class='sayDetail' wx-if='{{li.type=="question"}}'>{{li.content.content}}</text>
<text class='sayDetail' wx-if='{{li.type=="message"}}'>{{li.content}}</text>
</view>
</view>
<view class='ccds'></view>
</view>
</scroll-view>
<view class='btn' wx-if='{{tell==true&&promodal==false}}'>
<form bindreset="foo">
<input class="myinput" placeholder="说点什么吧" bindinput="sayValue" focus='{{myinputing}}'/>
<button form-type="reset" class='sub' wx-if='{{isSend=="send"||isSend=="sureAsk"}}' bindtap='sendMes'>发送</button>
<button form-type="reset" class='sub' wx-if='{{isSend=="ask"}}' bindtap='ask'>问</button>
</form>
</view>
</view>
js
const app = getApp()
var server = app.globalData.myUrl//这是自己的服务端接口地址设置于app.js
var WxParse = require('../../wxParse/wxParse.js');
var tellPage = 1
var myurl='ws://+"你自己的链接地址"'
var ws // socket发送的消息队列
var socketMsgQueue = []
var socketOpen = true // 判断心跳变量
var heart = '' // 心跳失败次数
var heartBeatFailCount = 0 // 终止心跳
var heartBeatTimeOut = null; // 终止重新连接
var connectSocketTimeOut = null;
Page({
/**
* 页面的初始数据
*/
data: {
sayValue:'',
tellData:[],//聊天消息
idx:'',
id:'',
评论0