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


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 tab切换(防止页面刷新)
May 23 Javascript
JS实现简单的Canvas画图实例
Jul 04 Javascript
javascript创建和存储cookie示例
Jan 07 Javascript
Javascript将JSON日期格式化
Aug 23 Javascript
ES6记录异步函数的执行时间详解
Aug 31 Javascript
微信小程序 免费SSL证书https、TLS版本问题的解决办法
Dec 14 Javascript
Vue官方文档梳理之全局配置
Nov 22 Javascript
微信小程序模板(template)使用详解
Jan 31 Javascript
react-native动态切换tab组件的方法
Jul 07 Javascript
vue生成文件本地打开查看效果的实例
Sep 06 Javascript
微信小程序 WXML节点信息查询详解
Jul 29 Javascript
详解JavaScript中的执行上下文及调用堆栈
Apr 29 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
在Windows XP下安装Apache+MySQL+PHP环境
2015/02/22 PHP
给Function做的OOP扩展
2009/05/07 Javascript
JavaScript编程开发中的五个实用小技巧
2010/07/22 Javascript
JQuery筛选器全系列介绍
2013/08/27 Javascript
动态添加删除表格行的js实现代码
2014/02/28 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
2015/05/09 Javascript
Vue.js 父子组件通讯开发实例
2016/09/06 Javascript
webpack踩坑之路图片的路径与打包
2017/09/05 Javascript
Vue 滚动行为的具体使用方法
2017/09/13 Javascript
AngularJS实现的生成随机数与猜数字大小功能示例
2017/12/25 Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
2018/04/18 jQuery
页面点击小红心js实现代码
2018/05/26 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
2018/07/17 Javascript
Next.js实现react服务器端渲染的方法示例
2019/01/06 Javascript
JavaScript的级联函数用法简单示例【链式调用】
2019/03/26 Javascript
微信小程序+云开发实现欢迎登录注册
2019/05/24 Javascript
vue移动端模态框(可传参)的实现
2019/11/20 Javascript
详解vue父子组件状态同步的最佳方式
2020/09/10 Javascript
详解webpack的文件监听实现(热更新)
2020/09/11 Javascript
[37:45]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS Orenda
2014/05/22 DOTA
python修改操作系统时间的方法
2015/05/18 Python
基于numpy中数组元素的切片复制方法
2018/11/15 Python
浅谈Python反射 &amp; 单例模式
2019/03/21 Python
使用python制作一个解压缩软件
2019/11/13 Python
numpy.ndarray 实现对特定行或列取值
2019/12/05 Python
Django rest framework分页接口实现原理解析
2020/08/21 Python
解决pytorch 模型复制的一些问题
2021/03/03 Python
Tiqets荷兰:出售欧洲最美丽的景点和博物馆门票
2018/01/09 全球购物
2014年元旦感言
2014/03/06 职场文书
工程售后服务承诺书
2014/05/21 职场文书
2014年国庆晚会主持词
2014/09/19 职场文书
2014年纪委工作总结
2014/12/05 职场文书
公司2014年度工作总结
2014/12/10 职场文书
2015年推普周活动方案
2015/05/06 职场文书
CSS 伪元素::marker详解
2021/06/26 HTML / CSS
《王者天下》第4季首话新剧照 4月9日正式开播
2022/04/07 日漫