微信小程序websocket实现即时聊天功能


Posted in Javascript onMay 21, 2019

今天给大家分享一下本人做小程序使用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:'',
 fjh:'',//房间号
 myinputing:'',
 isSend: 'ask',
 },
 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
 this.setData({
 id: options.id,
 fjh:options.roomNum,
 })
 this.history(1)
 this.connectStart()
 },
 /**
 * 生命周期函数--监听页面初次渲染完成
 */
 onReady: function () {
 //监听websocket连接状态
 this.deal()
 },
 /**
 * 生命周期函数--监听页面显示
 */
 onShow: function () {
 console.log()
 },
 /**
 * 生命周期函数--监听页面隐藏
 */
 onHide: function () {
 
 },
 /**
 * 生命周期函数--监听页面卸载
 */
 onUnload: function () {
 var that = this
 //离开页面销毁websocket并恢复初始数据
 wx.closeSocket()
 twice = 0
 socketOpen = true
 heart = ''  // 心跳失败次数
 heartBeatFailCount = 0 // 终止心跳
 heartBeatTimeOut = null; // 终止重新连接
 connectSocketTimeOut = null;
 },
 
 /**
 * 页面相关事件处理函数--监听用户下拉动作
 */
 onPullDownRefresh: function () {
 
 },
 /**
 * 页面上拉触底事件的处理函数
 */
 onReachBottom: function () {
 
 },
 /**
 * 用户点击右上角分享
 */
 onShareAppMessage: function () {
 console.log('点击分享')
 },
 //获取聊天室历史记录
 history: function (a) {
 var that = this
 wx.request({
 url: server + 'api/message/chatmsg',
 header: {
 "Authorization": app.globalData.token,
 },
 data: {
 page: a,
 type: '',
 resultsPerPage: 1000,
 stream: that.data.id
 },
 success: (res) => {
 var h = res.data.data.items
 if (h.length > 0) {
 var myArr = []
 var c = 0
 h.forEach(i => {
 c++
 i.id = c
 if (i.type == 'question' || i.type == 'answer') {
 i.content = JSON.parse(i.content)
 }
 myArr.push(i)
 })
 var j = h.length - 1
 var idx = h[j].id
 // console.log(h, idx)
 that.setData({
 tellData: h,
 idx: idx,
 })
 }
 
 }
 })
 },
 //与socket建立连接
 connectStart: function () {
 var that = this
 ws = wx.connectSocket({
 url: myurl,
 header: {
 "Authorization": app.globalData.token,
 'content-type': 'application/json'
 },
 data: JSON.stringify({
 token: app.globalData.token,
 type: 3,
 payLoad: {
 topic: that.data.fjh
 }
 }),
 success: (res) => {
 // console.log("进入聊天", res)
 },
 fail: (err) => {
 wx.showToast({
 title: '网络异常!',
 })
 console.log(err)
 },
 })
 
 // 连接成功
 wx.onSocketOpen((res) => {
 console.log('WebSocket 成功连接', res)
 that.resMes()
 // 开始心跳
 that.startHeartBeat()
 })
 //连接失败
 wx.onSocketError((err) => {
 console.log('websocket连接失败', err);
 twice=0
 that.connectStart()
 })
 },
 // 开始心跳
 startHeartBeat: function () {
 // console.log('socket开始心跳')
 var that = this;
 heart = 'heart';
 that.heartBeat();
 },
 // 心跳检测
 heartBeat: function () {
 var that = this;
 if (!heart) {
 return;
 }
 var xtData = {
 token: app.globalData.token,
 type: 1,
 payLoad: ""
 }
 // console.log(JSON.stringify({ xtData }))
 that.sendSocketMessage({
 msg: JSON.stringify(xtData),
 data: JSON.stringify(xtData),
 success: function (res) {
 // console.log('socket心跳成功',res);
 if (heart) {
 heartBeatTimeOut = setTimeout(() => {
 that.heartBeat();
 }, 5000);
 }
 },
 fail: function (res) {
 console.log('socket心跳失败');
 if (heartBeatFailCount > 2) {
 // 重连
 console.log('socket心跳失败')
 that.connectStart();
 }
 if (heart) {
 heartBeatTimeOut = setTimeout(() => {
 that.heartBeat();
 }, 5000);
 }
 heartBeatFailCount++;
 },
 });
 },
 // 进入聊天
 resMes: function () {
 var that = this
 var joinData = {
 token: app.globalData.token,
 type: 3,
 payLoad: JSON.stringify({
 topic: that.data.fjh
 }),
 }
 // console.log(joinData)
 that.sendSocketMessage({
 msg: JSON.stringify(joinData),
 data: JSON.stringify(joinData),
 success: function (res) {
 // console.log('进入房间成功', res);
 that.deal()
 },
 fail: function (err) {
 console.log('进入房间失败');
 },
 })
 },
 // 结束心跳
 stopHeartBeat: function () {
 // console.log('socket结束心跳')
 var that = this;
 heart = '';
 if (heartBeatTimeOut) {
 clearTimeout(heartBeatTimeOut);
 heartBeatTimeOut = null;
 }
 if (connectSocketTimeOut) {
 clearTimeout(connectSocketTimeOut);
 connectSocketTimeOut = null;
 }
 },
 // 消息发送
 foo: function () {
 if (this.data.inputValue) {
 //Do Something
 } else {
 //Catch Error
 }
 this.setData({
 inputValue: ''//将data的inputValue清空
 });
 return;
 },
 sayValue: function (e) {
 var that = this
 // console.log(this.data.isSend)
 if (that.data.isSend == 'ask') {
 that.setData({
 isSend: 'send'
 })
 }
 that.setData({
 sayValue: e.detail.value
 })
 },
 sendMes: function (e) {
 var that = this
 // console.log(this.data.sayValue, 111)
 var myInput = this.data.sayValue
 var token = app.globalData.token
 if (that.data.isSend == 'sureAsk') {
 wx.request({
 url: server + 'api/question/add',
 method: 'POST',
 header: {
 "Authorization": app.globalData.token,
 'content-type': 'application/json'
 },
 data: {
 content: myInput,
 streamId: that.data.id
 },
 success: (res) => {
 console.log(res, '我的提问')
 }
 })
 } else {
 // console.log(app.globalData.userInfo)
 var chatInfo = {
 user: app.globalData.userInfo.id,
 displayName: app.globalData.userInfo.displayName,
 avatarurl: app.globalData.userInfo.avatarUrl,
 stream: that.data.id,
 content: myInput,
 type: "message",
 createdat: "2018-10-8 14:30"
 }
 var sendData = {
 token: token,
 type: 2,
 payLoad: JSON.stringify({
 topic: that.data.fjh,
 chatInfo: JSON.stringify(chatInfo)
 })
 }
 // console.log(JSON.stringify(sendData))
 that.sendSocketMessage({
 msg: JSON.stringify(sendData)
 })
 }
 that.setData({
 sayValue: '',
 isSend: 'ask'
 })
 
 
 
 },
 // 通过 WebSocket 连接发送数据
 sendSocketMessage: function (options) {
 var that = this
 if (socketOpen) {
 wx.sendSocketMessage({
 data: options.msg,
 success: function (res) {
 if (options) {
 options.success && options.success(res);
 }
 },
 fail: function (res) {
 if (options) {
 options.fail && options.fail(res);
 }
 }
 })
 } else {
 socketMsgQueue.push(options.msg)
 }
 // ws.closeSocket();
 // that.deal()
 },
 // 监听socket
 deal: function () {
 var that = this
 ws.onOpen(res => {
 socketOpen = true;
 console.log('监听 WebSocket 连接打开事件。', res)
 })
 ws.onClose(onClose => {
 console.log('监听 WebSocket 连接关闭事件。', onClose)
 // socketOpen = false;
 // that.connectStart()
 })
 ws.onError(onError => {
 console.log('监听 WebSocket 错误。错误信息', onError)
 socketOpen = false
 })
 ws.onMessage(onMessage => {
 var res = JSON.parse(onMessage.data)
 // console.log(res,"接收到了消息")
 if (res.code == 200) {
 // console.log('服务器返回的消息', res.data)
 var resData = JSON.parse(res.data)
 var arr = that.data.tellData
 resData.id = arr.length + 1
 if (resData.type == 'question' || resData.type == 'answer') {
 resData.content = JSON.parse(resData.content)
 
 console.log('这是提问', resData.type, resData.content.content)
 }
 arr.push(resData)
 console.log(resData, arr.length)
 that.setData({
 tellData: arr,
 idx: resData.id
 })
 } else {
 }
 })
 
 },
 time: function (a) {
 var data = new Date(a)
 var year = data.getFullYear();
 var month = data.getMonth() + 1;
 var day1 = data.getDate();
 var hh = data.getHours(); //截取小时
 var mm = data.getMinutes(); //截取分钟
 if (month < 10) {
 month = '0' + month
 }
 if (day1 < 10) {
 day1 = '0' + day1
 }
 if (hh < 10) {
 hh = '0' + hh
 }
 if (mm < 10) {
 mm = '0' + mm
 }
 
 var newday = month + "月" + day1 + ' ' + hh + ':' + mm
 return newday
 },
 inputing: function () {
 console.log('获取焦点')
 this.setData({
 isSend: 'send'
 })
 },
 inputed: function () {
 // console.log('失去焦点')
 this.setData({
 isSend: 'ask',
 
 })
 },
 ask: function () {
 // console.log('提问')
 this.setData({
 myinputing: true,
 isSend: 'sureAsk'
 })
 },
 
})

以上仅是前端部分本人小程序websocket的使用实例,具体的情况需要配合自己的服务端。希望对大家有所帮助,也欢迎大家互相讨论。

Javascript 相关文章推荐
有一段有意思的代码-javascript现实多行信息
Aug 26 Javascript
js如何获取兄弟、父类等节点
Jan 06 Javascript
SeaJS入门教程系列之完整示例(三)
Mar 03 Javascript
js QQ客服悬浮效果实现代码
Dec 12 Javascript
TypeScript具有的几个不同特质
Apr 07 Javascript
js实现显示当前状态的导航效果代码
Aug 28 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
Dec 07 Javascript
用JS生成UUID的方法实例
Mar 30 Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
Jul 09 Javascript
node前端模板引擎Jade之标签的基本写法
May 11 Javascript
微信小程序使用wxParse解析html的实现示例
Aug 30 Javascript
详解如何webpack使用DllPlugin
Sep 30 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
May 21 #Javascript
taro开发微信小程序的实践
May 21 #Javascript
element-ui表格合并span-method的实现方法
May 21 #Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
May 21 #Javascript
浅谈React Native 传参的几种方式(小结)
May 21 #Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
May 21 #Javascript
JS判断数组里是否有重复元素的方法小结
May 21 #Javascript
You might like
WINDOWS下php5.2.4+mysql6.0+apache2.2.4+ZendOptimizer-3.3.0配置
2008/03/28 PHP
php实现在限定区域里自动调整字体大小的类实例
2015/04/02 PHP
Laravel 5.1 on SAE环境开发教程【附项目demo源码】
2016/10/09 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
2012/03/14 Javascript
jquery的ajax()函数传值中文乱码解决方法介绍
2012/11/08 Javascript
js报$ is not a function 的问题的解决方法
2014/01/20 Javascript
Linux下使用jq友好的打印JSON技巧分享
2014/11/18 Javascript
javascript结合CSS实现苹果开关按钮特效
2015/04/07 Javascript
jquery实现兼容IE8的异步上传文件
2015/06/15 Javascript
jquery+css实现动感的图片切换效果
2015/11/25 Javascript
详解AngularJS中的filter过滤器用法
2016/01/04 Javascript
Vue 路由 过渡动效 数据获取方法
2018/07/31 Javascript
JavaScript惰性求值的一种实现方法示例
2019/01/11 Javascript
angularjs模态框的使用代码实例
2019/12/20 Javascript
js实现百度淘宝搜索功能
2020/02/17 Javascript
js观察者模式的弹幕案例
2020/11/23 Javascript
详解js创建对象的几种方式和对象方法
2021/03/01 Javascript
Python下使用Psyco模块优化运行速度
2015/04/05 Python
python 获取url中的参数列表实例
2018/12/18 Python
Python3+selenium实现cookie免密登录的示例代码
2020/03/18 Python
Python 的 __str__ 和 __repr__ 方法对比
2020/09/02 Python
Html5页面二次分享的实现
2018/07/30 HTML / CSS
英国助听器购物网站:Hearing Direct
2018/08/21 全球购物
澳大利亚100%丝绸多彩度假装商店:TheSwankStore
2019/09/04 全球购物
LightInTheBox法国站:中国跨境电商
2020/03/05 全球购物
德国净水壶和滤芯品牌:波尔德PearlCo(家用净水器)
2020/04/29 全球购物
反腐倡廉演讲稿
2014/05/22 职场文书
普通党员自我剖析材料
2014/10/07 职场文书
2014年平安创建工作总结
2014/11/24 职场文书
运动会观后感
2015/06/09 职场文书
董事长新年致辞
2015/07/29 职场文书
《包身工》教学反思
2016/02/23 职场文书
护理专业毕业自我鉴定
2019/08/12 职场文书
MySQL8.0.24版本Release Note的一些改进点
2021/04/22 MySQL
教你怎么用Python selenium操作浏览器对象的基础API
2021/06/23 Python