微信小程序WebSocket实现聊天对话功能

{ socketOpen = true; console.log('监听 WebSocket 连接打开事件。',res) }) SocketTask.onClose(onClose => { console.log('监听 WebSocket 连接关闭事件。',onClose) socketOpen = false; this.webSocket() }) SocketTask.onError(onError => { console.log('监听 WebSocket 错误。错误信息',onError) socketOpen = false }) SocketTask.onMessage(onMessage => { console.log('监听WebSocket接受到服务器的消息事件。服务器返回的消息',JSON.parse(onMessage.data)) var onMessage_data = JSON.parse(onMessage.data) if (onMessage_data.cmd == 1) { that.setData({ link_list: text }) console.log(text,text instanceof Array) // 是否为数组 if (text instanceof Array) { for (var i = 0; i < text.length; i++) { text[i] } } else {

}
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)
})
}

查看详情 {{item}} <block wx:key="{{index}}" wx:for="{{allContentList}}">

<view class='my_right' wx:if="{{item.is_my}}">

{{item.is_my.text}} {{item.text}} {{item.a.title}} 发送

.my_right {
float: right;
margin-top: 30rpx;
position: relative;
right: 40rpx;
}
.my_audio{
height: 120rpx;
width: 150rpx;
position: absolute;
right: 150rpx;
background: white;
top: 20rpx;
}
.my_img_bg{
height: 150rpx;
width: 400rpx;
position: relative;
right: 0;
background: white;
top: 20rpx;
}
.you_left {
margin-top: 30rpx;
float: left;
position: relative;
left: 5rpx;
}

.new_img {
width: 100rpx;
height: 100rpx;
border-radius: 50%;
}

.new_txt {
width: 420rpx;
}
.new_txt_my{
border-radius: 7px;
background-color: #fff;
margin-top: 10rpx;
padding: 0rpx 30rpx 0rpx 30rpx;
float: right;
}
.new_txt_ai{
border-radius: 7px;
background-color: #fff;
margin-top: 10rpx;
padding: 0rpx 30rpx 0rpx 30rpx;
float: left;
}
.sanjiao {
top: 25rpx;
position: relative;
width: 0px;
height: 0px;
border-width: 15rpx;
border-style: solid;
}

.my {
border-color: transparent transparent transparent #fff;
}

.you {
border-color: transparent #fff transparent transparent;
}

.sendmessage {
width: 100%;
z-index: 2;
display: flex;
position: fixed;
bottom: 0px;
background-color: #F4F4F6;
flex-direction: row;
height: 85rpx;
}
.voice_icon{
width: 60rpx;
height: 60rpx;
margin: 0 auto;
padding: 10rpx 10rpx 10rpx 10rpx;
}
.voice_ing{
width: 90%;
height: 75rpx;
line-height: 85rpx;
text-align: center;
border-radius: 15rpx;
border: 1px solid #d0d0d0;
}
.sendmessage_2 {
z-index: 1;
position: relative;
width: 100%;
display: flex;
background-color: #F4F4F6;
flex-direction: row;
height: 85rpx;
}
.sendmessage input {
width: 75%;
height: 60rpx;
background-color: white;
line-height: 60rpx;
font-size: 28rpx;
border-radius: 10rpx;
margin-top: 10rpx;
margin-left: 20rpx;
border: 1px solid #d0d0d0;
padding-left: 20rpx;
}
.sendmessage button {
border: 1px solid white;
width: 18%;
height: 65rpx;
background: #00CC00;
color: white;
line-height: 65rpx;
margin-top: 10rpx;
font-size: 28rpx;
}

.hei{
height: 20rpx;
}
.history {
height: 80%;
padding: 20rpx 20rpx 20rpx 20rpx;
font-size: 14px;
line-height: 50rpx;
word-break: break-all;
}

.icno_kf{
position: fixed;
bottom: 160rpx;
margin: 0 auto;
text-align: center;
left: 50%;
margin-left: -40rpx;
width: 100rpx;
height: 100rpx;
border-radius: 50%
}