微信小程序实时聊天WebSocket


Posted in Javascript onJuly 05, 2018

本文实例为大家分享了微信小程序实时聊天WebSocket的具体代码,供大家参考,具体内容如下

1.所有监听事件先在onload监听。

// pages/index/to_news/to_news.js 
var app = getApp();
var socketOpen = false;
var SocketTask = false;
var url = 'ws://192.168.0.120:7011';
Page({
 data: {
  inputValue: '',
  returnValue: '',
 },
 onLoad: function (options) {
 },
 onReady: 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)
   },
  })
  if (SocketTask) {
   SocketTask.onOpen(res => {
    console.log('监听 WebSocket 连接打开事件。', res)
   })
   SocketTask.onClose(onClose => {
    console.log('监听 WebSocket 连接关闭事件。', onClose)
   })
   SocketTask.onError(onError => {
    console.log('监听 WebSocket 错误。错误信息', onError)
   })
   SocketTask.onMessage(onMessage => {
    console.log('监听WebSocket接受到服务器的消息事件。服务器返回的消息', onMessage)
   })
  }
 },
 
 // 提交文字
 submitTo: function (e) {
  let that = this;
  that.data.allContentList.push({that.data.inputValue });
  that.setData({
   allContentList: that.data.allContentList
  })
  var data = {
   text: that.data.inputValue
  }
  if (socketOpen) {
   // 如果打开了socket就发送数据给服务器
   sendSocketMessage(data)
  }
 },
 bindKeyInput: function (e) {
  this.setData({
   inputValue: e.detail.value
  })
 },
 
 onHide: function () {
   SocketTask.close(function (close) {
    console.log('关闭 WebSocket 连接。', close)
   })
 },
})
 
//通过 WebSocket 连接发送数据,需要先 wx.connectSocket,并在 wx.onSocketOpen 回调之后才能发送。
function sendSocketMessage(data) {
 console.log('通过 WebSocket 连接发送数据')
 if (socketOpen) {
  SocketTask.send({data: JSON.stringify(data)
  }, function (res) {
   console.log('已发送', res)
  })
 } else {
  socketMsgQueue.push(msg)
 }
}

html

<input type="text" bindinput="bindKeyInput" value='{{inputValue}}' placeholder="" />
<button bindtap="submitTo" class='user_input_text'>发送</button>

微信小程序实时聊天WebSocket

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

Javascript 相关文章推荐
javascript实现的像java、c#之类的sleep暂停的函数代码
Mar 04 Javascript
js中一个函数获取另一个函数返回值问题探讨
Nov 21 Javascript
JavaScript Serializer序列化时间处理示例
Jul 31 Javascript
js跨域问题浅析及解决方法优缺点对比
Nov 08 Javascript
jquery实现未经美化的简洁TAB菜单效果
Aug 28 Javascript
10个很棒的jQuery代码片段
Sep 24 Javascript
javascript数据类型验证方法
Dec 31 Javascript
js实现页面刷新滚动条位置不变
Nov 27 Javascript
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
Vue源码探究之虚拟节点的实现
Apr 17 Javascript
js实现简单进度条效果
Mar 25 Javascript
Vue3为什么这么快
Sep 23 Javascript
vue v-model实现自定义样式多选与单选功能
Jul 05 #Javascript
基于vue展开收起动画的示例代码
Jul 05 #Javascript
微信小程序实现星级评分和展示
Jul 05 #Javascript
vue-router history模式下的微信分享小结
Jul 05 #Javascript
微信小程序实现运动步数排行功能(可删除)
Jul 05 #Javascript
微信小程序之批量上传并压缩图片的实例代码
Jul 05 #Javascript
JavaScript控制浏览器全屏显示简单示例
Jul 05 #Javascript
You might like
介绍几个array库的新函数 php
2006/12/29 PHP
PHP调用MySQL的存储过程的实现代码
2008/08/12 PHP
PHP 数组遍历方法大全(foreach,list,each)
2010/06/30 PHP
PHP之数组学习
2011/05/29 PHP
php/js获取客户端mac地址的实现代码
2013/07/08 PHP
thinkphp获取栏目和文章当前位置的方法
2014/10/29 PHP
PHP版本常用的排序算法汇总
2015/12/20 PHP
Laravel框架Eloquent ORM简介、模型建立及查询数据操作详解
2019/12/04 PHP
JQUERY复选框CHECKBOX全选,取消全选
2008/08/30 Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
2013/08/27 Javascript
js控制容器隐藏出现防止样式变化的两种方法
2014/04/25 Javascript
jQuery插件slider实现拖动滑块选取价格范围
2015/04/30 Javascript
JS实现简单的图书馆享元模式实例
2015/06/30 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
2016/04/15 Javascript
javascript删除html标签函数cIsHTML
2017/01/09 Javascript
jquery单击文字或图片内容放大并居中显示
2017/06/23 jQuery
jQuery实现的简单前端搜索功能示例
2017/10/28 jQuery
详解vue父子组件关于模态框状态的绑定方案
2019/06/05 Javascript
vue.config.js常用配置详解
2019/11/14 Javascript
Python实现的几个常用排序算法实例
2014/06/16 Python
Python常用模块用法分析
2014/09/08 Python
Python根据区号生成手机号码的方法
2015/07/08 Python
python编程实现希尔排序
2017/04/13 Python
python控制windows剪贴板,向剪贴板中写入图片的实例
2018/05/31 Python
Python如何实现FTP功能
2020/05/28 Python
Python Pandas数据分析工具用法实例
2020/11/05 Python
PyQt5中QSpinBox计数器的实现
2021/01/18 Python
一款纯css3实现的动画加载导航
2014/10/08 HTML / CSS
CSS3实现可翻转的hover效果
2018/05/23 HTML / CSS
太阳镜仓库,售价20美元或更少:Sunglass Warehouse
2016/09/28 全球购物
高一自我鉴定
2013/12/17 职场文书
淘宝网店营销策划书
2014/01/11 职场文书
表彰先进集体通报
2014/01/12 职场文书
2015年国庆节活动总结
2015/03/23 职场文书
党小组鉴定意见
2015/06/02 职场文书
《堡垒之夜》联动《刺客信条》 4月7日正式上线
2022/04/06 其他游戏