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


Posted in Javascript onJuly 06, 2018

本文实例为大家分享了微信小程序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%
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
Feb 22 Javascript
JQuery 学习笔记 element属性控制
Jul 23 Javascript
文本框中,回车键触发事件的js代码[多浏览器兼容]
Jun 07 Javascript
JavaScript实现页面滚动图片加载(仿lazyload效果)
Jul 22 Javascript
主页面中的两个iframe实现鼠标拖动改变其大小
Apr 16 Javascript
javascript操作Cookie(设置、读取、删除)方法详解
Mar 18 Javascript
jquery滚动特效集锦
Jun 03 Javascript
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
js实现canvas图片与img图片的相互转换的示例
Aug 31 Javascript
浅谈JS的原型和继承
May 08 Javascript
jquery实现进度条状态展示
Mar 26 jQuery
JSONObject与JSONArray使用方法解析
Sep 28 Javascript
JavaScript实现的简单Tab点击切换功能示例
Jul 06 #Javascript
vue结合axios与后端进行ajax交互的方法
Jul 06 #Javascript
jQuery实现仿京东防抖动菜单效果示例
Jul 06 #jQuery
vue.js动画中的js钩子函数的实现
Jul 06 #Javascript
老生常谈JS中的继承及实现代码
Jul 06 #Javascript
vue.js使用v-if实现显示与隐藏功能示例
Jul 06 #Javascript
vue.js计算属性computed用法实例分析
Jul 06 #Javascript
You might like
php一句话cmdshell新型 (非一句话木马)
2009/04/18 PHP
检查url链接是否已经有参数的php代码 添加 ? 或 &amp;
2010/02/09 PHP
PHP 开发环境配置(Zend Server安装)
2010/04/28 PHP
php菜单/评论数据递归分级算法的实现方法
2019/08/01 PHP
PHP实现简易用户登录系统
2020/07/10 PHP
document.getElementById的简写方式(获取id对象的简略写法)
2010/09/10 Javascript
JS图片根据鼠标滚动延时加载的实例代码
2013/07/13 Javascript
jQuery封装的获取Url中的Get参数示例
2013/11/26 Javascript
浅析jquery的作用与优势
2013/12/02 Javascript
jQuery使用fadein方法实现渐出效果实例
2015/03/27 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
2015/10/23 Javascript
跟我学习javascript的执行上下文
2015/11/18 Javascript
nodejs微信扫码支付功能实现
2018/02/17 NodeJs
使用layui 渲染table数据表格的实例代码
2018/08/19 Javascript
4个顶级JavaScript高级文本编辑器
2018/10/10 Javascript
详解jQuery如何实现模糊搜索
2019/05/10 jQuery
JS去除字符串最后的逗号实例分析【四种方法】
2019/06/20 Javascript
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
2019/10/15 Javascript
原生JavaScript实现留言板
2021/01/10 Javascript
下载糗事百科的内容_python版
2008/12/07 Python
python类继承用法实例分析
2015/05/27 Python
Python简明入门教程
2015/08/04 Python
python生成器/yield协程/gevent写简单的图片下载器功能示例
2019/10/28 Python
简单了解Python读取大文件代码实例
2019/12/18 Python
Python Tornado实现WEB服务器Socket服务器共存并实现交互的方法
2020/05/26 Python
opencv+python实现鼠标点击图像,输出该点的RGB和HSV值
2020/06/02 Python
python如何设置静态变量
2020/09/07 Python
大学毕业生工作的自我评价
2013/10/01 职场文书
医学毕业生自我鉴定
2013/10/30 职场文书
《四季》教学反思
2014/04/08 职场文书
组织鉴定材料
2014/06/02 职场文书
个人作风纪律整顿整改措施
2014/10/25 职场文书
千与千寻观后感
2015/06/04 职场文书
2015毕业设计工作总结
2015/07/24 职场文书
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
2022/04/19 HTML / CSS
Golang实现可重入锁的示例代码
2022/05/25 Golang