介绍 var utils =,需要(“. ./. ./跑龙套/util.js")
页面({/* *
,*页面的初始数据
,*/,数据:{
,newsList: [],
,输入:空,
openid:零
},/* *
,*生命周期函数——监听页面加载
,*/,onLoad: function (选项),{=,var _this ;
,wx.getStorage ({
,,关键:& # 39;openid # 39;
,,成功:函数(res), {
_this.setData({才能
openid: res.data。才能
})才能
,,},
,})=,var _this ;
,//建立连接
,wx.connectSocket ({
url:,才能“wss://www.chat.blingfeng.cn/websocket/" + _this.data.openid +“/? options.to,
,})
,//连接成功
,wx.onSocketOpen (function (), {
console.log才能(& # 39;连接成功& # 39;);
,})
,wx.onSocketMessage(函数(res) {
var 才能;list =, [];
时间=list 才能;_this.data.newsList;
var 才能;_data =, JSON.parse (res.data);
list.push才能(_data);
console.log才能(列表)
_this.setData({才能
,,newsList:列表
})才能
,})
},/* *
,*生命周期函数——监听页面初次渲染完成
,*/,onReady: function (), {
},/* *
,*生命周期函数——监听页面显示
,*/,昂秀:function (), {
},/* *
,*生命周期函数——监听页面隐藏
,*/,onHide: function (), {
},/* *
,*生命周期函数——监听页面卸载
,*/onUnload:大敌;function (), {
},/* *
,*页面相关事件处理函数——监听用户下拉动作
,*/,onPullDownRefresh: function (), {
},/* *
,*页面上拉触底事件的处理函数
,*/,onReachBottom: function (), {
},/* *
,*用户点击右上角分享
,*/,onShareAppMessage: function (), {
},
,send :函数(){=,var _this ;
,如果(_this.data.input) {
,wx.sendSocketMessage ({
,,数据:_this.data.input,
,})
,var list =, [];=,,list this.data.newsList;
,var temp =,{, & # 39;消息# 39;:,_this.data.input,, & # 39;日期# 39;:,utils.formatTime (new 日期()),类型:,1,};
,list.push(临时);
,this.setData ({
newsList才能:列表,
,输入:零
,})
,}
},
,bindChange:函数(res) {
,this.setData ({
输入:才能res.detail.value
,})
},
,回:函数(){
,wx.closeSocket ();
,console.log(& # 39;连接断开& # 39;);
,}
}) & lt; !——页/索引/to_news/to_news.wxml祝辞
& lt; view 类=& # 39;top-content& # 39;比;
,& lt; image src=https://www.yisu.com/zixun/的图片/back.png类=' back-icon bindtap=盎亍?
<视图类=" weui-cells__title”风格='显示:flex; flex-direction:行;justify-content:中心;margin-left: 210 rpx>匿名聊天X
<视图类='新闻'>
<视图类=" historycon ">
<滚动视图scroll-y=" true " class="历史">
<块wx:=" {{newsList}}”天气:关键>
<查看天气:如果=" {{item.type==0}} ">
<视图>
<文本类=' chat-time '> {{item.date}}
<视图类='其他记录>
<图象类=' other-head-img ' src='图片/headimg.png '>
<视图类=' other-record-content-triangle '>
<视图类=皁ther-record-content”>
{{item.message}}
<查看天气:其他>
<视图>
<文本类=' chat-time '> {{item.date}}
<视图类=靶录吐肌?
<视图类=' own-record-content '> {{item.message}}
<视图类=' own-record-content-triangle '>
<图象类=' own-head-img ' src='图片/headimg.png '>
块
<视图类='黑' id="黑">
<视图类=" sendmessage ">
<输入class="聊天输入" type=" emoji bindinput=癰indChange confirm-type”=巴瓿伞眝alue='{{输入}}占位符="/>
怎么在微信小程序中利用websocket实现一个聊天功能吗?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
聊天。js
聊天。wxml
