微信小程序实时聊天WebSocket

 更新时间:2018年07月05日 16:34:01   作者:a_靖  
这篇文章主要为大家详细介绍了微信小程序实时聊天WebSocket的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

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

相关文章

  • JavaScript数组方法总结分析

    JavaScript数组方法总结分析

    下面小编就为大家带来一篇JavaScript数组方法总结分析。小编觉得挺不错的,现在分享给大家,也给大家做个参考
    2016-05-05
  • 原来JS还可以这样拆箱转换详解

    原来JS还可以这样拆箱转换详解

    这篇文章主要给大家介绍了关于JS拆箱转换的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-02-02
  • 如何解决Webview和H5缓存问题确保每次加载最新版本的资源详解

    如何解决Webview和H5缓存问题确保每次加载最新版本的资源详解

    WebView在加载H5页面时,可能会因为缓存机制导致用户看到旧版本的页面,这篇文章主要介绍了如何解决Webview和H5缓存问题确保每次加载最新版本的资源的相关资料,需要的朋友可以参考下
    2025-02-02
  • JavaScript中自定义事件用法分析

    JavaScript中自定义事件用法分析

    这篇文章主要介绍了JavaScript中自定义事件用法,较为详细的分析了自定义事件的原理与具体用法,具有一定的参考借鉴价值,需要的朋友可以参考下
    2014-12-12
  • js鼠标点击图片切换效果代码分享

    js鼠标点击图片切换效果代码分享

    这篇文章主要为大家详细介绍了js鼠标点击图片切换效果,很实用的代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2015-08-08
  • 使用js判断TextBox控件值改变然后出发事件

    使用js判断TextBox控件值改变然后出发事件

    这篇文章主要介绍了使用js判断TextBox控件值改变然后出发事件。需要的朋友可以过来参考下,希望对大家有所帮助
    2014-03-03
  • 浅析BootStrap栅格系统

    浅析BootStrap栅格系统

    这篇文章主要介绍了浅析BootStrap栅格系统的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • JavaScript中按位“异或”运算符使用介绍

    JavaScript中按位“异或”运算符使用介绍

    按位“异或”运算符 (^)是对两个表达式执行按位异或,下面为大家介绍下其具体的使用方法
    2014-03-03
  • BootStrap中的Fontawesome 图标

    BootStrap中的Fontawesome 图标

    这篇文章主要介绍了BootStrap中Fontawesome 图标的相关知识,需要的朋友可以参考下
    2017-05-05
  • KnockoutJS数组比较算法实例详解

    KnockoutJS数组比较算法实例详解

    这篇文章主要介绍了KnockoutJS数组比较算法实例详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-11-11

最新评论