devbox
我家小花儿
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

微信小程序WebSocket实现聊天对话功能完整源码_小程序 websocket源码

作者：我家小花儿 | 2024-03-14 06:26:05

赞

踩

小程序 websocket源码

相关文章：

1.小程序聊天群，发送语音，文字，图片。

2.微信小程序集成腾讯IM，实现实时音视频通话，1V1聊天

3.云开发微信小程序聊天群

4.接入网易云信IM即时通讯的微信小程序聊天室

5.微信小程序聊天功能 WebSocket 实现发送文字，图片，语音以及WebSocket 常见问题解决方案

6.[微信小程序]聊天对话(文本,图片)的功能(完整代码附效果图)

如果有个性化的需要修改，可以联系我的微信。

微信小程序开发交流qq群   173683895

   承接微信小程序开发。扫码加微信。

正文：

js

  1. var app = getApp();
  2. var socketOpen = false;
  3. var frameBuffer_Data, session, SocketTask;
  4. var url = 'ws://请填写您的长链接接口地址';
  5. var upload_url ='请填写您的图片上传接口地址'
  6. Page({
  7.   data: {
  8.     user_input_text: '',//用户输入文字
  9.     inputValue: '',
  10.     returnValue: '',
  11.     addImg: false,
  12.     //格式示例数据，可为空
  13.     allContentList: [],
  14.     num: 0
  15.   },
  16.   // 页面加载
  17.   onLoad: function () {
  18.     this.bottom();
  19.   },
  20.   onShow: function (e) {
  21.     if (!socketOpen) {
  22.       this.webSocket()
  23.     }
  24.   },
  25.   // 页面加载完成
  26.   onReady: function () {
  27.     var that = this;
  28.     SocketTask.onOpen(res => {
  29.       socketOpen = true;
  30.       console.log('监听 WebSocket 连接打开事件。', res)
  31.     })
  32.     SocketTask.onClose(onClose => {
  33.       console.log('监听 WebSocket 连接关闭事件。', onClose)
  34.       socketOpen = false;
  35.       this.webSocket()
  36.     })
  37.     SocketTask.onError(onError => {
  38.       console.log('监听 WebSocket 错误。错误信息', onError)
  39.       socketOpen = false
  40.     })
  41.     SocketTask.onMessage(onMessage => {
  42.       console.log('监听WebSocket接受到服务器的消息事件。服务器返回的消息', JSON.parse(onMessage.data))
  43.       var onMessage_data = JSON.parse(onMessage.data)
  44.       if (onMessage_data.cmd == 1) {
  45.         that.setData({
  46.           link_list: text
  47.         })
  48.         console.log(text, text instanceof Array)
  49.         // 是否为数组
  50.         if (text instanceof Array) {
  51.           for (var i = 0; i < text.length; i++) {
  52.             text[i]
  53.           }
  54.         } else {
  55.  
  56.         }
  57.         that.data.allContentList.push({ is_ai: true, text: onMessage_data.body });
  58.         that.setData({
  59.           allContentList: that.data.allContentList
  60.         })
  61.         that.bottom()
  62.       }
  63.     })
  64.   },
  65.   webSocket: function () {
  66.     // 创建Socket
  67.     SocketTask = wx.connectSocket({
  68.       url: url,
  69.       data: 'data',
  70.       header: {
  71.         'content-type': 'application/json'
  72.       },
  73.       method: 'post',
  74.       success: function (res) {
  75.         console.log('WebSocket连接创建', res)
  76.       },
  77.       fail: function (err) {
  78.         wx.showToast({
  79.           title: '网络异常！',
  80.         })
  81.         console.log(err)
  82.       },
  83.     })
  84.   },
  85.  
  86.   // 提交文字
  87.   submitTo: function (e) {
  88.     let that = this;
  89.     var data = {
  90.       body: that.data.inputValue,
  91.     }
  92.  
  93.     if (socketOpen) {
  94.       // 如果打开了socket就发送数据给服务器
  95.       sendSocketMessage(data)
  96.       this.data.allContentList.push({ is_my: { text: this.data.inputValue }});
  97.       this.setData({
  98.         allContentList: this.data.allContentList,
  99.         inputValue: ''
  100.       })
  101.  
  102.       that.bottom()
  103.     }
  104.   },
  105.   bindKeyInput: function (e) {
  106.     this.setData({
  107.       inputValue: e.detail.value
  108.     })
  109.   },
  110.  
  111.   onHide: function () {
  112.     SocketTask.close(function (close) {
  113.       console.log('关闭 WebSocket 连接。', close)
  114.     })
  115.   },
  116.   upimg: function () {
  117.     var that = this;
  118.       wx.chooseImage({
  119.         sizeType: ['original', 'compressed'],
  120.         success: function (res) {
  121.           that.setData({
  122.             img: res.tempFilePaths
  123.           })
  124.           wx.uploadFile({
  125.             url: upload_url,
  126.             filePath: res.tempFilePaths,
  127.             name: 'img',
  128.             success: function (res) {
  129.               console.log(res)
  130.                 wx.showToast({
  131.                   title: '图片发送成功！',
  132.                   duration: 3000
  133.                 });
  134.             }
  135.           })  
  136.           that.data.allContentList.push({ is_my: { img: res.tempFilePaths } });
  137.           that.setData({
  138.             allContentList: that.data.allContentList,
  139.           })
  140.           that.bottom();
  141.         }
  142.       })
  143.   },   
  144.   addImg: function () {
  145.     this.setData({
  146.       addImg: !this.data.addImg
  147.     })
  148.  
  149.   },
  150.   // 获取hei的id节点然后屏幕焦点调转到这个节点  
  151.   bottom: function () {
  152.     var that = this;
  153.     this.setData({
  154.       scrollTop: 1000000
  155.     })
  156.   },
  157. })
  158.  
  159. //通过 WebSocket 连接发送数据，需要先 wx.connectSocket，并在 wx.onSocketOpen 回调之后才能发送。
  160. function sendSocketMessage(msg) {
  161.   var that = this;
  162.   console.log('通过 WebSocket 连接发送数据', JSON.stringify(msg))
  163.   SocketTask.send({
  164.     data: JSON.stringify(msg)
  165.   }, function (res) {
  166.     console.log('已发送', res)
  167.   })
  168. }

 

wxml

 

  1. <view class='page_bg' wx:if='{{block}}' bindtap='hide_bg' />
  2. <view class='btn_bg' wx:if='{{block}}'>
  3.   <view wx:for="{{link_list}}" wx:key='index'>
  4.     <button class="sp_tit" id='{{index}}' bindtap='list_item'>查看详情 {{item}} </button>
  5.   </view>
  6. </view>
  7. <scroll-view class="history" scroll-y="true" scroll-with-animation scroll-top="{{scrollTop}}">
  8.  
  9.   <block wx:key="{{index}}" wx:for="{{allContentList}}">
  10.     <!-- <view>
  11.       <text class='time'>{{time}}</text>
  12.     </view> -->
  13.     <view class='my_right' wx:if="{{item.is_my}}">
  14.       <view class='p_r' wx:if='{{item.is_my.text}}'>
  15.         <text class='new_txt'><text class='new_txt_my'>{{item.is_my.text}}</text></text>
  16.         <view class='sanjiao my'></view>
  17.         <image class='new_img' src='/images/test.jpg'></image>
  18.       </view>
  19.       <view class='p_r' wx:if='{{item.is_my.img}}' bindtap='my_audio_click' data-id='{{index}}'>
  20.         <text class='new_txt'> </text>
  21.         <view class='my_img_bg'>
  22.         <image class='my_audio' src='{{img}}'></image></view>
  23.         <view class='sanjiao my'></view>
  24.         <image class='new_img' src='/images/test.jpg'></image>
  25.       </view>
  26.     </view>
  27.     <!-- <view class='you_left' id='id_{{allContentList.length}}'> -->
  28.     <view class='you_left' id='id_{{allContentList.length}}' wx:key="{{index}}" wx:if="{{item.is_ai}}">
  29.       <view class='p_r'>
  30.         <image class='new_img' src='/images/chac.jpg'></image>
  31.         <view class='sanjiao you'></view>
  32.         <view class='new_txt'>
  33.           <view class='new_txt_ai'>
  34.             <!-- {{item.text}} -->
  35.             <block wx:for='{{item.is_two}}' wx:key='index'>
  36.               <text wx:if='{{item.text}}'>{{item.text}}</text>
  37.               <text wx:if='{{item.a.title}}' style='color:#0000EE' bindtap='link' id='{{item.a.link}}'>{{item.a.title}}</text>
  38.             </block>
  39.           </view>
  40.         </view>
  41.       </view>
  42.     </view>
  43.   </block>
  44. </scroll-view>
  45. <view class="sendmessage">
  46.   <image class='voice_icon' bindtap='addImg' src='/images/jia_img.png'></image>
  47.   <block wx:if='{{!addImg}}'>
  48.     <input type="text" bindinput="bindKeyInput" value='{{inputValue}}' focus='{{focus}}' bindfocus="focus" confirm-type="done" placeholder="" />
  49.     <button bindtap="submitTo" class='user_input_text'>发送</button>
  50.   </block>
  51.   <block wx:if='{{addImg}}'>
  52.     <view class='voice_ing' bindtap="upimg">发送图片</view>
  53.   </block>
  54. </view>

css

  1. page {  
  2.   background-color: #f2f2f2;  
  3.   height: 100%;
  4. }  
  5. .jia_img{  
  6.   height: 80rpx;  
  7.   width: 90rpx;  
  8. }  
  9. .time {  
  10.   text-align: center;  
  11.   padding: 5rpx 20rpx 5rpx 20rpx;  
  12.   width: 200rpx;  
  13.   font-size: 26rpx;  
  14.   background-color: #E8E8E8;  
  15. }  
  16. .tab{
  17.   bottom: 120rpx;
  18. }
  19. .tab_1{
  20.   position: fixed;
  21.   bottom: 50rpx;
  22.   width: 200rpx;
  23.   font-size: 26rpx;
  24.   left: 50%;
  25.   margin-left: -45rpx;
  26.   height: 100rpx;
  27. }
  28. .tab_2{
  29.   right: 30rpx;
  30.   position: fixed;
  31. }
  32. /* 聊天 */  
  33.   
  34. .my_right {  
  35.   float: right;  
  36.   margin-top: 30rpx;
  37.   position: relative;  
  38.   right: 40rpx;  
  39. }  
  40. .my_audio{
  41.   height: 120rpx;
  42.   width: 150rpx;
  43.   position: absolute;
  44.   right: 150rpx;
  45.   background: white;
  46.   top: 20rpx;
  47. }
  48. .my_img_bg{
  49.   height: 150rpx;
  50.   width: 400rpx;
  51.   position: relative;
  52.   right: 0;
  53.   background: white;
  54.   top: 20rpx;
  55. }
  56. .you_left {  
  57.   margin-top: 30rpx;
  58.   float: left;  
  59.   position: relative;  
  60.   left: 5rpx;  
  61. }  
  62.   
  63. .new_img {  
  64.   width: 100rpx;  
  65.   height: 100rpx;  
  66.   border-radius: 50%;  
  67. }  
  68.   
  69. .new_txt {  
  70.   width: 420rpx;  
  71. }  
  72. .new_txt_my{
  73.   border-radius: 7px;  
  74.   background-color: #fff;  
  75.   margin-top: 10rpx;
  76.   padding: 0rpx 30rpx 0rpx 30rpx;  
  77.   float: right;
  78. }
  79. .new_txt_ai{
  80.   border-radius: 7px;  
  81.   background-color: #fff;  
  82.   margin-top: 10rpx;
  83.   padding: 0rpx 30rpx 0rpx 30rpx;  
  84.   float: left;
  85. }
  86. .sanjiao {  
  87.   top: 25rpx;  
  88.   position: relative;  
  89.   width: 0px;  
  90.   height: 0px;  
  91.   border-width: 15rpx;  
  92.   border-style: solid;  
  93. }  
  94.   
  95. .my {  
  96.   border-color: transparent transparent transparent #fff;  
  97. }  
  98.   
  99. .you {  
  100.   border-color: transparent #fff transparent transparent;  
  101. }  
  102.   
  103. .sendmessage {  
  104.   width: 100%;  
  105.   z-index: 2;
  106.   display: flex;  
  107.   position: fixed;
  108.   bottom: 0px;
  109.   background-color: #F4F4F6; 
  110.   flex-direction: row;  
  111.   height: 85rpx;
  112. }  
  113. .voice_icon{
  114.   width: 60rpx;
  115.   height: 60rpx;
  116.   margin: 0 auto;
  117.   padding: 10rpx 10rpx 10rpx 10rpx;
  118. }
  119. .voice_ing{
  120.   width: 90%;
  121.   height: 75rpx;
  122.   line-height: 85rpx;
  123.   text-align: center;
  124.   border-radius: 15rpx;
  125.   border: 1px solid #d0d0d0;
  126. }
  127. .sendmessage_2 {  
  128.   z-index: 1;
  129.   position: relative;
  130.   width: 100%;  
  131.   display: flex;  
  132.   background-color: #F4F4F6; 
  133.   flex-direction: row;  
  134.   height: 85rpx;
  135. }    
  136. .sendmessage input {  
  137.   width: 75%;  
  138.   height: 60rpx;   
  139.   background-color: white; 
  140.   line-height: 60rpx;  
  141.   font-size: 28rpx;  
  142.   border-radius: 10rpx;
  143.   margin-top: 10rpx;
  144.   margin-left: 20rpx;
  145.   border: 1px solid #d0d0d0;  
  146.   padding-left: 20rpx;  
  147. }  
  148. .sendmessage button {  
  149.   border: 1px solid white;  
  150.   width: 18%;  
  151.   height: 65rpx;  
  152.   background: #00CC00;
  153.   color: white;
  154.   line-height: 65rpx;  
  155.   margin-top: 10rpx;
  156.   font-size: 28rpx;  
  157. }  
  158.   
  159. .hei{  
  160.   height: 20rpx;  
  161. }  
  162. .history {  
  163.   height: 80%;  
  164.   padding: 20rpx  20rpx  20rpx  20rpx;
  165.   font-size: 14px;  
  166.   line-height: 50rpx;  
  167.   word-break: break-all;  
  168. }  
  169.  
  170. .icno_kf{
  171.   position: fixed;
  172.   bottom: 160rpx;
  173.   margin: 0 auto;
  174.   text-align: center;
  175.   left: 50%;
  176.   margin-left: -40rpx;
  177.   width: 100rpx;
  178.   height: 100rpx;
  179.   border-radius: 50%
  180. }

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/232561
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号