微信小程序实时聊天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 相关文章推荐
js 绑定带参数的事件以及手动触发事件
Apr 27 Javascript
Webkit的跨域安全问题说明
Sep 13 Javascript
js函数的引用, 关于内存的开销
Sep 17 Javascript
框架页面高度自动刷新的Javascript脚本
Nov 01 Javascript
js动态移动滚动条至底部示例代码
Apr 24 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
Jun 23 Javascript
JS中SetTimeout和SetInterval使用初探
Mar 23 Javascript
bootstrap 通过加减按钮实现输入框组功能
Nov 15 Javascript
vue使用axios实现文件上传进度的实时更新详解
Dec 20 Javascript
优雅的elementUI table单元格可编辑实现方法详解
Dec 23 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
Vue的data、computed、watch源码浅谈
Apr 04 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
php过滤危险html代码
2008/08/18 PHP
提高PHP编程效率的53个要点(经验小结)
2010/09/04 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
实例讲解PHP表单
2020/06/10 PHP
JavaScript经典效果集锦
2010/07/06 Javascript
用js代码改变单选框选中状态的简单实例
2013/12/18 Javascript
html文本框提示效果的示例代码
2014/06/28 Javascript
JavaScript中关键字 in 的使用方法详解
2016/10/17 Javascript
JavaScript实现自定义媒体播放器方法介绍
2017/01/03 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
2017/02/16 Javascript
Angular4学习笔记之根模块与Ng模块
2017/09/09 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
2018/04/20 jQuery
javascript面向对象程序设计实践常用知识点总结
2019/07/29 Javascript
JS基础之逻辑结构与循环操作示例
2020/01/19 Javascript
react结合bootstrap实现评论功能
2020/05/30 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
2020/07/13 Javascript
js实现自定义滚动条的示例
2020/10/27 Javascript
python编程开发之类型转换convert实例分析
2015/11/13 Python
Python使用装饰器模拟用户登陆验证功能示例
2018/08/24 Python
Python实现批量执行同目录下的py文件方法
2019/01/11 Python
python如何实现数据的线性拟合
2019/07/19 Python
Python3 中作为一等对象的函数解析
2019/12/11 Python
python3中pip3安装出错,找不到SSL的解决方式
2019/12/12 Python
Python猴子补丁知识点总结
2020/01/05 Python
python日期与时间戳的各种转换示例
2020/02/12 Python
pycharm 复制代码出现空格的解决方式
2021/01/15 Python
西班牙网上书店:Casa del Libro
2016/11/01 全球购物
法国二手手袋、手表和奢侈珠宝购物网站:Collector Square
2018/07/05 全球购物
精通CAD能手自荐书
2014/01/31 职场文书
读书伴我成长演讲稿
2014/05/07 职场文书
五水共治捐款倡议书
2014/05/14 职场文书
公司周年庆典策划方案
2014/05/17 职场文书
2015年圣诞节寄语
2015/08/17 职场文书
Pandas搭配lambda组合使用详解
2022/01/22 Python
Nginx+Tomcat负载均衡多实例详解
2022/04/11 Servers