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


Posted in Javascript onApril 19, 2017

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

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
 },

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

Javascript 相关文章推荐
jQuery Tips 为AJAX回调函数传递额外参数的方法
Dec 28 Javascript
JavaScript中window、doucment、body的解释
Aug 14 Javascript
javascript面向对象之访问对象属性的两种方式分析
Jan 13 Javascript
js全选实现和判断是否有复选框选中的方法
Feb 17 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
May 10 Javascript
Web程序员必备的7个JavaScript函数
Jun 14 Javascript
jQuery设置Easyui校验规则(推荐)
Nov 21 Javascript
js移动端事件基础及常用事件库详解
Aug 15 Javascript
js实现图片上传到服务器和回显
Jan 19 Javascript
JS数组的常用10种方法详解
May 08 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
Sep 16 Javascript
Nuxt.js nuxt-link与router-link的区别说明
Nov 06 Javascript
Vuex之理解Store的用法
Apr 19 #Javascript
微信小程序 判断手机号的实现代码
Apr 19 #Javascript
Vuex简单入门
Apr 19 #Javascript
微信小程序 滚动到某个位置添加class效果实现代码
Apr 19 #Javascript
微信小程序 slider的简单实例
Apr 19 #Javascript
详解Node.js中exports和module.exports的区别
Apr 19 #Javascript
jQuery ajax请求struts action实现异步刷新
Apr 19 #jQuery
You might like
PHP实现限制IP访问的方法
2017/04/20 PHP
PDO::getAvailableDrivers讲解
2019/01/28 PHP
php输出形式实例整理
2020/05/05 PHP
Aster vs Newbee BO5 第二场2.19
2021/03/10 DOTA
XHTML-Strict 内允许出现的标签
2006/12/11 Javascript
js 巧妙去除数组中的重复项
2010/01/25 Javascript
javascript下string.format函数补充
2010/08/24 Javascript
Javascript中的this绑定介绍
2011/09/22 Javascript
jquery控制页面部分刷新的方法
2015/06/24 Javascript
纯css实现窗户玻璃雨滴逼真效果
2015/08/23 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
2016/02/25 Javascript
requireJS使用指南
2016/04/27 Javascript
简单实现jQuery进度条轮播实例代码
2016/06/20 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
2016/08/23 Javascript
jquery根据一个值来选中select下的option实例代码
2016/08/29 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
2016/11/12 Javascript
js防抖和节流的深入讲解
2018/12/06 Javascript
layui 实现加载动画以及非真实加载进度的方法
2019/09/23 Javascript
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
2019/09/27 Javascript
Javascript异步执行不按顺序解决方案
2020/04/30 Javascript
基于Vue sessionStorage实现保留搜索框搜索内容
2020/06/01 Javascript
[06:10]6.81新信使新套装!给你一个炫酷的DOTA2
2014/05/06 DOTA
Python决策树分类算法学习
2017/12/22 Python
python3 破解 geetest(极验)的滑块验证码功能
2018/02/24 Python
使用Python的Django和layim实现即时通讯的方法
2018/05/25 Python
DRF跨域后端解决之django-cors-headers的使用
2019/01/27 Python
Python完成哈夫曼树编码过程及原理详解
2019/07/29 Python
Python如何使用bokeh包和geojson数据绘制地图
2020/03/21 Python
Python脚本破解压缩文件口令实例教程(zipfile)
2020/06/14 Python
python 实现性别识别
2020/11/21 Python
python 如何上传包到pypi
2020/12/24 Python
世界顶级俱乐部的官方球衣和套装:Subside Sports
2018/04/22 全球购物
大学生就业自荐书
2014/06/16 职场文书
2014年学雷锋活动总结
2014/06/26 职场文书
公司领导九九重阳节发言稿2014
2014/09/25 职场文书
html+css实现文字折叠特效实例
2021/06/02 HTML / CSS