本文实例为大家分享了微信小程序WebSocket实现聊天对话功能的具体代码,供大家参考,具体内容如下
js
}
that.data.allContentList.push({ is_ai: true,text: onMessage_data.body });
that.setData({
allContentList: that.data.allContentList
})
that.bottom()
}
})
},webSocket: function () {
// 创建Socket
SocketTask = wx.connectSocket({
url: url,data: 'data',header: {
'content-type': 'application/json'
},method: 'post',success: function (res) {
console.log('WebSocket连接创建',res)
},fail: function (err) {
wx.showToast({
title: '网络异常!',})
console.log(err)
},})
},// 提交文字
submitTo: function (e) {
let that = this;
var data = {
body: that.data.inputValue,}
if (socketOpen) {
// 如果打开了socket就发送数据给服务器
sendSocketMessage(data)
this.data.allContentList.push({ is_my: { text: this.data.inputValue }});
this.setData({
allContentList: this.data.allContentList,inputValue: ''
})
that.bottom()
}
},bindKeyInput: function (e) {
this.setData({
inputValue: e.detail.value
})
},onHide: function () {
SocketTask.close(function (close) {
console.log('关闭 WebSocket 连接。',close)
})
},upimg: function () {
var that = this;
wx.chooseImage({
sizeType: ['original','compressed'],success: function (res) {
that.setData({
img: res.tempFilePaths
})
wx.uploadFile({
url: upload_url,filePath: res.tempFilePaths,name: 'img',success: function (res) {
console.log(res)
wx.showToast({
title: '图片发送成功!',duration: 3000
});
}
})
that.data.allContentList.push({ is_my: { img: res.tempFilePaths } });
that.setData({
allContentList: that.data.allContentList,})
that.bottom();
}
})
},addImg: function () {
this.setData({
addImg: !this.data.addImg
})
},// 获取hei的id节点然后屏幕焦点调转到这个节点
bottom: function () {
var that = this;
this.setData({
scrollTop: 1000000
})
},})
//通过 WebSocket 连接发送数据,需要先 wx.connectSocket,并在 wx.onSocketOpen 回调之后才能发送。
function sendSocketMessage(msg) {
var that = this;
console.log('通过 WebSocket 连接发送数据',JSON.stringify(msg))
SocketTask.send({
data: JSON.stringify(msg)
},function (res) {
console.log('已发送',res)
})
}
wxml
<view class='my_right' wx:if="{{item.is_my}}">