微信小程序实时聊天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 相关文章推荐
用jQuery技术实现Tab页界面之二
Sep 21 Javascript
js 数组的for循环到底应该怎么写?
May 31 Javascript
IE的事件传递-event.cancelBubble示例介绍
Jan 12 Javascript
如何动态加载外部Javascript文件
Dec 02 Javascript
javascript作用域、作用域链(菜鸟必看)
Jun 16 Javascript
最原始的jQuery注册验证方式
Oct 11 Javascript
EasyUI Combobox设置默认值 获取text的方法
Nov 28 Javascript
在js中做数字字符串补0(js补零)
Mar 25 Javascript
Vue 进阶教程之v-model详解
May 06 Javascript
vue2.x+webpack快速搭建前端项目框架详解
Nov 30 Javascript
Vue分页器实现原理详解
Jun 28 Javascript
jQuery实现手风琴特效
Jan 11 jQuery
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
ob_start(),ob_start('ob_gzhandler')使用
2006/12/25 PHP
php 接口类与抽象类的实际作用
2009/11/26 PHP
在php中判断一个请求是ajax请求还是普通请求的方法
2011/06/28 PHP
ThinkPHP中RBAC类的四种用法分析
2014/11/24 PHP
PHP file_get_contents函数读取远程数据超时的解决方法
2015/05/13 PHP
phpStorm2020 注册码
2020/09/17 PHP
BOOM vs RR BO5 第四场 2.14
2021/03/10 DOTA
jQuery实现下拉框选择图片功能实例
2015/08/08 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
2016/02/25 Javascript
AngularJS中指令的四种基本形式实例分析
2016/11/22 Javascript
解析ajaxFileUpload 异步上传文件简单使用
2016/12/30 Javascript
使用JavaScript触发过渡效果的方法
2017/01/19 Javascript
Vue2 Vue-cli中使用Typescript的配置详解
2017/07/24 Javascript
详解如何在vue项目中使用layui框架及采坑
2019/05/05 Javascript
p5.js实现简单货车运动动画
2019/10/23 Javascript
vue 动态组件用法示例小结
2020/03/06 Javascript
[01:14:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Orenda
2014/05/22 DOTA
Python打印斐波拉契数列实例
2015/07/07 Python
在Python的Django框架中更新数据库数据的方法
2015/07/17 Python
Python中shape计算矩阵的方法示例
2017/04/21 Python
用python结合jieba和wordcloud实现词云效果
2017/09/05 Python
python print 按逗号或空格分隔的方法
2018/05/02 Python
python利用百度AI实现文字识别功能
2018/11/27 Python
python简单实现AES加密和解密
2019/03/28 Python
python实现对象列表根据某个属性排序的方法详解
2019/06/11 Python
python字符串分割及字符串的一些常规方法
2019/07/24 Python
Pycharm和Idea支持的vim插件的方法
2020/02/21 Python
python如何对链表操作
2020/10/10 Python
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
2014/04/10 HTML / CSS
Nike西班牙官方网站:Nike.com (ES)
2017/10/30 全球购物
优良学风班申请材料
2014/02/13 职场文书
如何写一份好的英文求职信
2014/03/19 职场文书
小学班主任心得体会
2016/01/07 职场文书
《日月潭》教学反思
2016/02/20 职场文书
关于JavaScript 中 if包含逗号表达式
2021/11/27 Javascript
利用Python实现翻译HTML中的文本字符串
2022/06/21 Python