微信小程序> 微信交流群,微信小程序WebSocket实现聊天对话功能完整源码

微信交流群,微信小程序WebSocket实现聊天对话功能完整源码

浏览量:752 时间: 来源:a_靖
微信小程序开发交流qq群173683895
承接微信小程序开发。扫码加微信。正文: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;itext.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){letthat=this;vardata={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(){varthat=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(){varthat=this;this.setData({scrollTop:1000000})},})//通过WebSocket连接发送数据,需要先wx.connectSocket,并在wx.onSocketOpen回调之后才能发送。functionsendSocketMessage(msg){varthat=this;console.log('通过WebSocket连接发送数据',JSON.stringify(msg))SocketTask.send({data:JSON.stringify(msg)},function(res){console.log('已发送',res)})}
wxml
viewclass='page_bg'wx:if='{{block}}'bindtap='hide_bg'/viewclass='btn_bg'wx:if='{{block}}'viewwx:for="{{link_list}}"wx:key='index'buttonid='{{index}}'bindtap='list_item'查看详情{{item}}/button/view/viewscroll-viewscroll-y="true"scroll-with-animationscroll-top="{{scrollTop}}"blockwx:key="{{index}}"wx:for="{{allContentList}}"!--viewtextclass='time'{{time}}/text/view--viewclass='my_right'wx:if="{{item.is_my}}"viewclass='p_r'wx:if='{{item.is_my.text}}'textclass='new_txt'textclass='new_txt_my'{{item.is_my.text}}/text/textviewclass='sanjiaomy'/viewimageclass='new_img'src='/images/test.jpg'/image/viewviewclass='p_r'wx:if='{{item.is_my.img}}'bindtap='my_audio_click'data-id='{{index}}'textclass='new_txt'/textviewclass='my_img_bg'imageclass='my_audio'src='{{img}}'/image/viewviewclass='sanjiaomy'/viewimageclass='new_img'src='/images/test.jpg'/image/view/view!--viewclass='you_left'id='id_{{allContentList.length}}'--viewclass='you_left'id='id_{{allContentList.length}}'wx:key="{{index}}"wx:if="{{item.is_ai}}"viewclass='p_r'imageclass='new_img'src='/images/chac.jpg'/imageviewclass='sanjiaoyou'/viewviewclass='new_txt'viewclass='new_txt_ai'!--{{item.text}}--blockwx:for='{{item.is_two}}'wx:key='index'textwx:if='{{item.text}}'{{item.text}}/texttextwx:if='{{item.a.title}}'style='color:#0000EE'bindtap='link'id='{{item.a.link}}'{{item.a.title}}/text/block/view/view/view/view/block/scroll-viewviewimageclass='voice_icon'bindtap='addImg'src='/images/jia_img.png'/imageblockwx:if='{{!addImg}}'inputtype="text"bindinput="bindKeyInput"value='{{inputValue}}'focus='{{focus}}'bindfocus="focus"confirm-type="done"placeholder=""/buttonbindtap="submitTo"class='user_input_text'发送/button/blockblockwx:if='{{addImg}}'viewclass='voice_ing'bindtap="upimg"发送图片/view/block/viewcss
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%}

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎