相关文章：
1.小程序聊天群，发送语音，文字，图片。
2.微信小程序集成腾讯IM，实现实时音视频通话，1V1聊天
3.云开发微信小程序聊天群
4.接入网易云信IM即时通讯的微信小程序聊天室
5.微信小程序聊天功能 WebSocket 实现发送文字，图片，语音以及WebSocket 常见问题解决方案
6.[微信小程序]聊天对话(文本,图片)的功能(完整代码附效果图)
如果有个性化的需要修改，可以联系我的微信。
微信小程序开发交流qq群 173683895
承接微信小程序开发。扫码加微信。
正文：
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 () {// 创建SocketSocketTask = 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%}
