18910140161

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

顺晟科技

2021-06-16 10:51:51

423

今天给大家分享一下本人做小程序使用求转发到的一点小经验,希望对大家有所帮助。

使用之前肯定首先要了解一下求转发到是什么,简单来讲求转发到就是客户端与服务器之间专门建立的一条特殊通道,请求只需要请求一次,而且还可以从通道实时获取服务器数据,非常适合应用到实时应用上。

因为这里本人是分享小程序,所以就不去深究求转发到的底层和协议了,感兴趣的朋友可以去看下求转发到协议

建议大家在做之前先看看微信小程序官方提供的美国石油学会(美国石油学会)关于求转发到的文档,因为微信的求转发到接口虽然和HTML5的求转发到基本一样但是语法上还是有少许偏差,了解一下还是很有必要的。

话不多说上代码(css代码就不贴了,就是一些简单的聊天样式排版)

页面结构

视角

scroll-view scroll-y=' true ' scroll-with-animation=' true ' scroll-x=' false ' scroll-into-view=' list-{ { idx } } ' class=' twnav '

视图类='twChild '

!-文本视频聊天室/text -

view class=' tell ROOm ' 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 ' | |李。type==' message ' } } ' src=' { { Li。头像URL } } '/图像

image class=' SayHead ' wx-if=' { { Li。type==' answer ' } } ' src=' { { Li。内容。orgLoGo } } '/图像

/view

view class='tellDetail '

text class=' name ' wx-if=' { { Li。type==' question ' | |李。type==' message ' } } ' { { Li。显示名称} } :/文本

text class=' name ' wx-if=' { { Li。type==' answer ' } } ' { { Li。内容。Organame } }回复{{li.displayName}}:/text

查看wx-if='{{li.type=='答案} }“class=”答案'

view class=' anquee ' {李。内容。问题} }/视图

view class=' ANan ' { Li。内容。答案} }/查看

/view

图片wx-if=' { {李。type==' question ' } } ' class=' question ' src='././image/icon _ question @ 2x。“png”模式=“width FiX”/图像

text class=' SayDetail ' wx-if=' { { Li。type==' question ' } } ' { { Li。内容。内容} }/文本

text class=' SayDetail ' wx-if=' { { Li。type==' message ' } } ' { { Li。内容} }/文本

/view

/view

view class='ccds'/view

/view

/scroll-view

view class=' BTN ' wx-if=' { { tell==true promodal==false } } '

form bindreset='foo '

input class='myinput '占位符='说点什么吧绑定输入=' SayValue '焦点=' { {我的输入} } '/

按钮形式-type=' reset ' class=' sub ' wx-if=' { { isSend==' send ' | | isSend==' SureAsk ' } } ' bind tap=' SendMes '发送/按钮

按钮形式-type=' reset ' class=' sub ' wx-if=' { { ISsend==' ask ' } } ' bind tap=' ask '问/按钮

/form

/view

/view

射流研究…

const app=getApp()

var server=app.globalData.myUrl//这是自己的服务端接口地址设置于app.js

var WxParse=require('././wx parse/wx parse。js’);

var tellPage=1

var myurl='ws://'你自己的链接地址''

var ws //套接字发送的消息队列

var socketMsgQueue=[]

var socketOpen=true //判断心跳变量

var heart='' //心跳失败次数

var heartBeatFailCount=0 //终止心跳

var heartBeatTimeOut=null//终止重新连接

var connectSocketTimeOut=null

页面({

/**

* 页面的初始数据

*/

数据: {

sayValue: ' ',

tellData:[],//聊天消息

idx: ' ',

id: ' ',

fjh: ' ',//房间号

myinputing: ' ',

isSend: 'ask ',

},

/**

* 生命周期函数-监听页面加载

*/

在线加载:函数(选项){

this.setData({

id: options.id,

fjh:options.roomNum,

})

历史(1)

this.connectStart()

},

/**

* 生命周期函数-监听页面初次渲染完成

*/

onReady:函数(){

//监听求转发到连接状态

this.deal()

},

/**

* 生命周期函数-监听页面显示

*/

onShow:函数(){

console.log()

},

/**

* 生命周期函数-监听页面隐藏

*/

在线:函数(){

},

/**

* 生命周期函数-监听页面卸载

*/

onUnload:函数(){

变量=这个

//离开页面销毁求转发到并恢复初始数据

wx.closeSocket()

两倍=0

socketOpen=真

heart='' //心跳失败次数

heartBeatFailCount=0 //终止心跳

heartBeatTimeOut=null//终止重新连接

connectSocketTimeOut=null

},

/**

* 页面相关事件处理函数-监听用户下拉动作

*/

onpulldownlrefresh :函数(){

},

/**

* 页面上拉触底事件的处理函数

*/

在线底部:函数(){

},

/**

* 用户点击右上角分享

*/

onShareAppMessage:函数(){

console.log('点击分享)

},

//获取聊天室历史记录

历史:功能(a) {

变量=这个

wx.request({

url:服务器api/message/chatmsg ',

header: {

授权: app.globalData.token,

},

数据: {

第: a页,

类型: ' ',

结果第:页,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].编号

//console.log(h,idx)

that.setData({

tellData: h,

idx: idx,

})

}

}

})

},

//与窝建立连接

connectStart:函数(){

变量=这个

ws=wx.connectSocket({

url: myurl,

header: {

授权: app.globalData.token,

内容类型' : '应用程序/json '

},

data: JSON.stringify({

token: app.globalData.token,

type: 3,

payLoad: {

topic: that.data.fjh

}

}),

success: (res)={

//console.log('进入聊天,res)

},

fail: (err)={

wx.showToast({

标题: '网络异常!',

})

console.log(错误)

},

})

//连接成功

wx.onSocketOpen((res)={

console.log('WebSocket成功连接,res)

that.resMes()

//开始心跳

那个。开始心跳()

})

//连接失败

wx。onscocketerror((err)={

console.log('websocket连接失败,err);

两倍=0

that.connectStart()

})

},

//开始心跳

startHeartBeat:函数(){

//console.log('socket开始心跳)

那=这个

心='心

那个。心跳();

},

//心跳检测

心跳:函数(){

那=这个

if(!心){

返回;

}

var xtData={

token: app.globalData.token,

type: 1,

payLoad: ' '

}

//控制台。日志(JSON。stringify({ xtData }))

that.sendSocketMessage({

msg: JSON.stringify(xtData),

data: JSON.stringify(xtData),

成功:功能(res) {

//console.log('socket心跳成功,RES);

if (heart) {

心跳超时=设置超时(()={

那个。心跳();

}, 5000);

}

},

fail:功能(res) {

console.log('socket心跳失败');

if (heartBeatFailCount 2) {

//重连

console.log('socket心跳失败)

那个。connect start();

}

if (heart) {

心跳超时=设置超时(()={

那个。心跳();

}, 5000);

}

心跳失败计数

},

});

},

//进入聊天

resMes:函数(){

变量=这个

var joinData={

token: app.globalData.token,

type: 3,

payLoad: JSON.stringify({

topic: that.data.fjh

}),

}

//console.log(joinData)

that.sendSocketMessage({

msg : JSON。stringify(JoinData),

数据: JSON。stringify(JoinData),

成功:功能(res) {

//console.log('进入房间成功,RES);

成交()

},

fail:函数(错误){

console.log('进入房间失败');

},

})

},

//结束心跳

停止心跳:函数(){

//console.log('socket结束心跳)

那=这个

心脏=

if (heartBeatTimeOut) {

cleartime out(心跳超时);

心跳超时=空

}

if (connectSocketTimeOut) {

clear time out(connectSockettimeout);

connectSocketTimeOut=null

}

},

//消息发送

foo: function () {

if (this.data.inputValue) {

//做点什么

} else {

//捕捉错误

}

this.setData({

输入值e : ' '//将数据的输入值清空

});

返回;

},

sayValue:函数(e) {

变量=这个

//console.log(this.data.isSend)

if (that.data.isSend=='ask') {

that.setData({

' isSend: '发送'

})

}

that.setData({

sayValue: e.detail.value

})

},

sendMes:函数(e) {

变量=这个

//控制台。log(这个。数据。SayValue,111)

var myInput=this.data.sayValue

var token=app.globalData.token

如果(那个。数据。Issend==' SureAsk '){

wx.request({

url:服务器api/question/add ',

方法: '开机自检,

header: {

授权: app.globalData.token,

内容类型' : '应用程序/json '

},

数据: {

内容:我的输入,

streamId: that.data.id

},

success: (res)={

console.log(res,)我的提问)

}

})

} else {

//控制台。日志(app。全球数据。用户信息)

var chatInfo={

用户:应用。GlobalData。UserInfo。id,

显示名称:应用程序。全球数据。UserInfo。显示名称,

avatarurl :应用程序。GlobalData。UserInfo。avatarurl,

stream: that.data.id,

内容:我的输入,

键入: '消息,

创建dat : ' 2018-10-8 14:30 '

}

var sendData={

令牌:令牌,

type: 2,

payLoad: JSON.stringify({

topic: that.data.fjh,

ChatInfo : JSON。stringify(ChatInfo)

})

}

//控制台。日志(JSON。字符串(发送数据))

that.sendSocketMessage({

msg : JSON。字符串(发送数据)

})

}

that.setData({

sayValue: ' ',

isSend: 'ask '

})

},

//通过WebSocket连接发送数据

发送套接字消息:功能(选项){

变量=这个

if (socketOpen) {

wx.sendSocketMessage({

data: options.msg,

成功:功能(res) {

if(选项){

选项。成功选项。成功(RES);

}

},

fail:功能(res) {

if(选项){

选项。失败选项。失败(RES);

}

}

})

} else {

socketmsgqueue。push(选项。消息)

}

//ws。CloseSocket();

//that.deal()

},

//监听窝

deal: function () {

变量=这个

ws.onOpen(res={

socketOpen=真

console.log('监听WebSocket连接打开事件,res)

})

ws.onClose(onClose={

console.log('监听WebSocket连接关闭事件,onClose)

//SockeTopen=false;

//那个。connectStart()

})

ws.onError(onError={

console.log('监听WebSocket错误。错误信息,onError)

socketOpen=false

})

ws.onMessage(onMessage={

var RES=JSON。解析(OnMessage。数据)

//console.log(res,'接收到了消息)

if (res.code==200) {

//console.log('服务器返回的消息,res.data)

var resData=JSON.parse(res.data)

var arr=the。数据。讲述数据

resData.id=arr.length 1

if(Resdata。type==' question ' | | Resdata。type==' answer '){

resdata。content=JSON。解析(resdata。内容)

console.log('这是提问,resData.type,resData.content.content)

}

arr.push(resData)

console.log(resData,arr.length)

that.setData({

tellData: arr,

idx: resData.id

})

} else {

}

})

},

时间:功能(a) {

变动数据=新日期(a)

var year=数据。get full year();

var month=数据。get month()1;

var day 1=数据。GetDate();

var hh=数据。gethours();//截取小时

var mm=数据。GetMinutes();//截取分钟

if(第10个月){

月份='0 '个月

}

if(天10) {

天='0 '天

}

if (hh 10) {

hh='0' hh

}

if (mm 10) {

mm='0' mm

}

' var newday=month '月天hh ': '毫米

返回新的

},

inputing: function () {

console.log('获取焦点)

this.setData({

' isSend: '发送'

})

},

inputed:函数(){

//console.log('失去焦点)

this.setData({

isSend: 'ask ',

})

},

ask: function () {

//console.log('提问)

this.setData({

myinputing: true,

isSend: 'sureAsk '

})

},

})

相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航