微信小程序 聊天室简单实现

 更新时间:2017年04月19日 14:58:03   投稿:lqh  
这篇文章主要介绍了微信小程序 聊天室简单实现的相关资料,需要的朋友可以参考下

微信小程序 聊天室简单实现

utils文件夹下websoctet.js文件

var url = 'ws://地址端口';

function connect(user, func) {

 wx.connectSocket({
  url: url,
  header: {"content-type":'application/x-www-form-urlencoded'}
 });
 wx.onSocketOpen(function (res) {
  send('{"type":"login","client_name":"'+user.nickName+'","room_id":"1"}')
 });
//接受消息
 wx.onSocketMessage(func);
}

//发送消息
function send(msg) {
 wx.sendSocketMessage({ data: msg });
}
module.exports = {
 connect: connect,
 send: send
}

具体页面.js文件内容:

var websocket = require('../../utils/websocket.js');
 //事件处理函数
 add: function (e) {
  websocket.send('{"type":"say","from_client_id":"'+user.nickName+'","to_client_id":"all","content":"'+this.data.message+'"}')
 },
 onLoad: function () {
  var that = this
  //调用应用实例的方法获取全局数据
  app.getUserInfo(function (userInfo) {
   user = userInfo;
   websocket.connect(user, function (res) {
    text = that.encodeStr(res.data) + "\n";
    console.log(res)
    that.setData({
     text: text
    });
    // websocket.send('{"type":"pong"}');
   })
  })
 },

下面方法很好玩,因为使用的服务器 是开源的PHP服务器,所以微信小程序接收到的聊天室中文内容是ASCII编码,所以经过此方法可以转换。

 encodeStr: function (str) {
  var character = str.split("\\u");
  var native1 = character[0];
  for (var i = 1; i < character.length; i++) {
   var code = character[i];
   native1 += String.fromCharCode(parseInt("0x" + code.substring(0, 4)));
   if (code.length > 4) {
    native1 += code.substring(4, code.length);
   }
  }
  return native1
 },

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

相关文章

  • umi插件开发仿dumi项目实现页面布局详解

    umi插件开发仿dumi项目实现页面布局详解

    这篇文章主要为大家介绍了umi插件开发仿dumi项目实现页面布局详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • 前端AI机器学习在浏览器中训练模型

    前端AI机器学习在浏览器中训练模型

    这篇文章主要为大家介绍了前端AI机器学习在浏览器中训练模型的示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • 前端可视化搭建组件值与联动实现详解

    前端可视化搭建组件值与联动实现详解

    这篇文章主要为大家介绍了前端可视化搭建组件值与联动实现详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • 微信小程序实现给循环列表添加点击样式实例

    微信小程序实现给循环列表添加点击样式实例

    这篇文章主要介绍了微信小程序实现给循环列表添加点击样式实例的相关资料,需要的朋友可以参考下
    2017-04-04
  • 微信小程序 数据遍历的实现

    微信小程序 数据遍历的实现

    这篇文章主要介绍了微信小程序 数据遍历的实现的相关资料,需要的朋友可以参考下
    2017-04-04
  • 深入讲解JavaScript之继承的多种方式和优缺点

    深入讲解JavaScript之继承的多种方式和优缺点

    本文讲主要解JavaScript各种继承方式和优缺点,文章将六种继承方式说明,分别有原型链继承、借用构造函数(经典继承)、组合继承、原型式继承、寄生式继承、 寄生组合式继承,这六种方式,需要的朋友可以参考一下
    2021-10-10
  • JS疑惑的数据类型及类型判断方法详解

    JS疑惑的数据类型及类型判断方法详解

    这篇文章主要为大家介绍了JS中疑惑的数据类型及类型判断方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • 微信小程序promsie.all和promise顺序执行

    微信小程序promsie.all和promise顺序执行

    这篇文章主要介绍了微信小程序promsie.all和promise顺序执行的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下
    2017-10-10
  • JS前端html2canvas手写示例问题剖析

    JS前端html2canvas手写示例问题剖析

    这篇文章主要为大家介绍了JS前端html2canvas手写示例问题剖析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • delete 语法的本质深入解析

    delete 语法的本质深入解析

    这篇文章主要为大家介绍了delete 语法的本质深入解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03

最新评论