微信小程序实时聊天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>

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

相关文章

  • js 蒙版进度条(结合图片)

    js 蒙版进度条(结合图片)

    js 结合图片实现的蒙版进度条效果。
    2010-03-03
  • JavaScript提高加载和执行效率的方法

    JavaScript提高加载和执行效率的方法

    JavaScript在浏览器中的性能成为开发者所面临的最重要的可用性问题。而这个问题又因JavaScript的阻塞特性变的复杂,也就是说当浏览器在执行JavaScript代码时,不能同时做其他任何事情。本文详细介绍了如何正确的加载和执行JavaScript代码,从而提高其在浏览器中的性能。
    2017-02-02
  • JavaScript高级程序设计 阅读笔记(十七) js事件

    JavaScript高级程序设计 阅读笔记(十七) js事件

    IE中是冒泡型事件,即从最特定的事件目标到最不特定的事件目标
    2012-08-08
  • javascript手风琴下拉菜单实现代码

    javascript手风琴下拉菜单实现代码

    手风琴效果的下拉菜单大家都有见到过吧,实现的方法也有很多,这篇文章就为大家分享了javascript手风琴下拉菜单实现代码,纯手写的,感兴趣的朋友不要错过。
    2015-11-11
  • 原生js拖拽实现图形伸缩效果

    原生js拖拽实现图形伸缩效果

    这篇文章主要为大家详细介绍了原生js拖拽实现图形的伸缩效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02
  • Javascript中的getter和setter初识

    Javascript中的getter和setter初识

    最近在工作中遇到了getter和setter,getter 是一种获得属性值的方法,setter是一种设置属性值的方法。下面这篇文章主要给大家介绍了关于Javascript中getter和setter的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-08-08
  • three.js中文文档学习之通过模块导入

    three.js中文文档学习之通过模块导入

    这篇文章主要给大家介绍了关于three.js中文文档学习之通过模块导入的相关资料,文中通过示例代码介绍的非常详细,对大家学习或使用three.js具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-11-11
  • javascript跨浏览器的属性判断方法

    javascript跨浏览器的属性判断方法

    这篇文章主要介绍了javascript跨浏览器的属性判断的方法,需要的朋友可以参考下
    2014-03-03
  • Javascript 链式作用域详细介绍

    Javascript 链式作用域详细介绍

    这篇文章主要介绍了Javascript 链式作用域详细介绍的相关资料,需要的朋友可以参考下
    2017-02-02
  • 鼠标悬停小图标显示大图标

    鼠标悬停小图标显示大图标

    这篇文章主要介绍了鼠标悬停小图标显示大图标的相关资料,需要的朋友可以参考下
    2016-01-01

最新评论