微信小程序WebSocket实现聊天对话功能
本文实例为大家分享了微信小程序WebSocket实现聊天对话功能的具体代码，供大家参考，具体内容如下
js
varapp=getApp();
varsocketOpen=false;
varframeBuffer_Data,session,SocketTask;
varurl='ws://请填写您的长链接接口地址';
varupload_url='请填写您的图片上传接口地址'
Page({
data:{
user_input_text:'',//用户输入文字
inputValue:'',
returnValue:'',
addImg:false,
//格式示例数据，可为空
allContentList:[],
num:0
},
//页面加载
onLoad:function(){
this.bottom();
},
onShow:function(e){
if(!socketOpen){
this.webSocket()
}
},
//页面加载完成
onReady:function(){
varthat=this;
SocketTask.onOpen(res=>{
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))
varonMessage_data=JSON.parse(onMessage.data)
if(onMessage_data.cmd==1){
that.setData({
link_list:text
})
console.log(text,textinstanceofArray)
//是否为数组
if(textinstanceofArray){
for(vari=0;i
wxml
查看详情{{item}}
{{item.is_my.text}}
{{item.text}}
{{item.a.title}}
发送
发送图片
css
page{
background-color:#f2f2f2;
height:100%;
}
.jia_img{
height:80rpx;
width:90rpx;
}
.time{
text-align:center;
padding:5rpx20rpx5rpx20rpx;
width:200rpx;
font-size:26rpx;
background-color:#E8E8E8;
}
.tab{
bottom:120rpx;
}
.tab_1{
position:fixed;
bottom:50rpx;
width:200rpx;
font-size:26rpx;
left:50%;
margin-left:-45rpx;
height:100rpx;
}
.tab_2{
right:30rpx;
position:fixed;
}
/*聊天*/
.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:0rpx30rpx0rpx30rpx;
float:right;
}
.new_txt_ai{
border-radius:7px;
background-color:#fff;
margin-top:10rpx;
padding:0rpx30rpx0rpx30rpx;
float:left;
}
.sanjiao{
top:25rpx;
position:relative;
width:0px;
height:0px;
border-width:15rpx;
border-style:solid;
}
.my{
border-color:transparenttransparenttransparent#fff;
}
.you{
border-color:transparent#ffftransparenttransparent;
}
.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:0auto;
padding:10rpx10rpx10rpx10rpx;
}
.voice_ing{
width:90%;
height:75rpx;
line-height:85rpx;
text-align:center;
border-radius:15rpx;
border:1pxsolid#d0d0d0;
}
.sendmessage_2{
z-index:1;
position:relative;
width:100%;
display:flex;
background-color:#F4F4F6;
flex-direction:row;
height:85rpx;
}
.sendmessageinput{
width:75%;
height:60rpx;
background-color:white;
line-height:60rpx;
font-size:28rpx;
border-radius:10rpx;
margin-top:10rpx;
margin-left:20rpx;
border:1pxsolid#d0d0d0;
padding-left:20rpx;
}
.sendmessagebutton{
border:1pxsolidwhite;
width:18%;
height:65rpx;
background:#00CC00;
color:white;
line-height:65rpx;
margin-top:10rpx;
font-size:28rpx;
}
.hei{
height:20rpx;
}
.history{
height:80%;
padding:20rpx20rpx20rpx20rpx;
font-size:14px;
line-height:50rpx;
word-break:break-all;
}
.icno_kf{
position:fixed;
bottom:160rpx;
margin:0auto;
text-align:center;
left:50%;
margin-left:-40rpx;
width:100rpx;
height:100rpx;
border-radius:50%
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。