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


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 相关文章推荐
JS根据年月获得当月天数的实现代码
Jul 03 Javascript
点评js异步加载的4种方式
Dec 22 Javascript
深入浅析JavaScript中with语句的理解
May 12 Javascript
JS产生随机数的几个用法详解
Jun 22 Javascript
浅谈JavaScript 中有关时间对象的方法
Aug 15 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
Aug 29 Javascript
微信小程序 扎金花简单实例
Feb 21 Javascript
分享vue.js devtools遇到一系列问题
Oct 24 Javascript
Angular开发实践之服务端渲染
Mar 29 Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
Oct 08 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
Apr 07 Javascript
JavaScript定时器常见用法实例分析
Nov 15 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 ajax 分页类代码
2008/11/13 PHP
smarty简单入门实例
2014/11/28 PHP
实例讲解php数据访问
2016/05/09 PHP
PHP 输出缓冲控制(Output Control)详解
2016/08/25 PHP
Thinkphp整合微信支付功能
2016/12/14 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
img的onload的另类用法
2008/01/10 Javascript
ImageZoom 图片放大镜效果(多功能扩展篇)
2010/04/14 Javascript
StringTemplate遇见jQuery冲突的解决方法
2011/09/22 Javascript
仿中关村在线首页弹出式广告插件(jQuery版)
2012/05/03 Javascript
Jquery submit()无法提交问题
2013/04/21 Javascript
jquery获取iframe中的dom对象(两种方法)
2013/07/02 Javascript
jQuery模拟黑客帝国矩阵效果实例
2015/06/28 Javascript
nodejs导出excel的方法
2015/06/30 NodeJs
js实现表格筛选功能
2017/01/18 Javascript
jquery获取下拉框中的循环值
2017/02/08 Javascript
详解plotly.js 绘图库入门使用教程
2018/02/23 Javascript
如何自定义微信小程序tabbar上边框的颜色
2019/07/09 Javascript
JavaScrip如果基于url实现图片下载
2020/07/03 Javascript
如何利用javascript接收json信息并进行处理
2020/08/06 Javascript
推荐下python/ironpython:从入门到精通
2007/10/02 Python
python下读取公私钥做加解密实例详解
2017/03/29 Python
解决安装python库时windows error5 报错的问题
2018/10/21 Python
对Python多线程读写文件加锁的实例详解
2019/01/14 Python
python 日志 logging模块详细解析
2020/03/31 Python
python实现处理mysql结果输出方式
2020/04/09 Python
Python使用plt.boxplot() 参数绘制箱线图
2020/06/04 Python
通过实例了解python__slots__使用方法
2020/09/14 Python
详解python os.path.exists判断文件或文件夹是否存在
2020/11/16 Python
Nobody Denim官网:购买高级女士牛仔裤
2021/03/15 全球购物
工程专业求职自荐书范文
2014/02/18 职场文书
一体化教学实施方案
2014/05/10 职场文书
财务工作个人总结
2015/02/27 职场文书
优秀乡村医生事迹材料(2016精选版)
2016/02/29 职场文书
七年级语文教学反思
2016/03/03 职场文书
React Fragment介绍与使用详解
2021/11/11 Javascript