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

本文实例为大家分享了微信小程序WebSocket实现聊天对话功能的具体代码，供大家参考，具体

本文实例为大家分享了微信小程序WebSocket实现聊天对话功能的具体代码，供大家参考，具体内容如下

js

var app = getApp();
var socketOpen = false;
var frameBuffer_Data, session, SocketTask;
var url = 'ws://请填写您的长链接接口地址';
var upload_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 () {
 var that = 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))
 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)
 })
} 

wxml

<view class='page_bg' wx:if='{{block}}' bindtap='hide_bg' />
<view class='btn_bg' wx:if='{{block}}'>
 <view wx:for="{{link_list}}" wx:key='index'>
 <button class="sp_tit" id='{{index}}' bindtap='list_item'>查看详情 {{item}} </button>
 </view>
</view>
<scroll-view class="history" scroll-y="true" scroll-with-animation scroll-top="{{scrollTop}}">
 
 <block wx:key="{{index}}" wx:for="{{allContentList}}">
 <!-- <view>
 <text class='time'>{{time}}</text>
 </view> -->
 <view class='my_right' wx:if="{{item.is_my}}">
 <view class='p_r' wx:if='{{item.is_my.text}}'>
 <text class='new_txt'><text class='new_txt_my'>{{item.is_my.text}}</text></text>
 <view class='sanjiao my'></view>
 <image class='new_img' src='/images/test.jpg'></image>
 </view>
 <view class='p_r' wx:if='{{item.is_my.img}}' bindtap='my_audio_click' data-id='{{index}}'>
 <text class='new_txt'> </text>
 <view class='my_img_bg'>
 <image class='my_audio' src='{{img}}'></image></view>
 <view class='sanjiao my'></view>
 <image class='new_img' src='/images/test.jpg'></image>
 </view>
 </view>
 <!-- <view class='you_left' id='id_{{allContentList.length}}'> -->
 <view class='you_left' id='id_{{allContentList.length}}' wx:key="{{index}}" wx:if="{{item.is_ai}}">
 <view class='p_r'>
 <image class='new_img' src='/images/chac.jpg'></image>
 <view class='sanjiao you'></view>
 <view class='new_txt'>
 <view class='new_txt_ai'>
 <!-- {{item.text}} -->
 <block wx:for='{{item.is_two}}' wx:key='index'>
 <text wx:if='{{item.text}}'>{{item.text}}</text>
 <text wx:if='{{item.a.title}}' style='color:#0000EE' bindtap='link' id='{{item.a.link}}'>{{item.a.title}}</text>
 </block>
 </view>
 </view>
 </view>
 </view>
 </block>
</scroll-view>
<view class="sendmessage">
 <image class='voice_icon' bindtap='addImg' src='/images/jia_img.png'></image>
 <block wx:if='{{!addImg}}'>
 <input type="text" bindinput="bindKeyInput" value='{{inputValue}}' focus='{{focus}}' bindfocus="focus" confirm-type="done" placeholder="" />
 <button bindtap="submitTo" class='user_input_text'>发送</button>
 </block>
 <block wx:if='{{addImg}}'>
 <view class='voice_ing' bindtap="upimg">发送图片</view>
 </block>
</view>

css

page { 
 background-color: #f2f2f2; 
 height: 100%;
} 
.jia_img{ 
 height: 80rpx; 
 width: 90rpx; 
} 
.time { 
 text-align: center; 
 padding: 5rpx 20rpx 5rpx 20rpx; 
 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: 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%
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。