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


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 相关文章推荐
css把超出的部分显示为省略号的方法兼容火狐
Jul 23 Javascript
JS跨域总结
Aug 30 Javascript
jquery按回车提交数据的代码示例
Nov 05 Javascript
AngularJS Ajax详解及示例代码
Aug 17 Javascript
Bootstrap CSS组件之按钮组(btn-group)
Dec 17 Javascript
使用jquery给新生的th绑定hover事件的实例
Feb 10 Javascript
Angular 组件之间的交互的示例代码
Mar 24 Javascript
React Form组件的实现封装杂谈
May 07 Javascript
js中Array对象的常用遍历方法详解
Jan 17 Javascript
详解javascript对数组和json数组的操作
Apr 15 Javascript
详解JavaScript 事件流
Sep 02 Javascript
DWR内存兼容及无法调用问题解决方案
Oct 16 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 静态化实现代码
2009/03/20 PHP
php入门学习知识点二 PHP简单的分页过程与原理
2011/07/14 PHP
php获取服务器信息的实现代码
2013/02/04 PHP
PHP GD库生成图像的几个函数总结
2014/11/19 PHP
tp5框架内使用tp3.2分页的方法分析
2019/05/05 PHP
测试你的JS的掌握程度的代码
2009/12/09 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
2015/10/30 Javascript
iScroll.js 使用方法参考
2016/05/16 Javascript
vue.js初学入门教程(1)
2016/11/03 Javascript
js css自定义分页效果
2017/02/24 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
2017/04/13 Javascript
Javascript快速实现浏览器系统通知
2017/08/26 Javascript
JavaScript图片处理与合成总结
2018/03/04 Javascript
node实现的爬虫功能示例
2018/05/04 Javascript
微信公众平台 发送模板消息(Java接口开发)
2019/04/17 Javascript
5分钟教你用nodeJS手写一个mock数据服务器的方法
2019/09/10 NodeJs
Vue页面刷新记住页面状态的实现
2019/12/27 Javascript
[01:15:18]2014 DOTA2国际邀请赛中国区预选赛 LGD VS Speed Gaming.cn
2014/05/22 DOTA
Python基于DES算法加密解密实例
2015/06/03 Python
Flask框架的学习指南之开发环境搭建
2016/11/20 Python
Sanic框架异常处理与中间件操作实例分析
2018/07/16 Python
PyCharm设置护眼背景色的方法
2018/10/29 Python
Pandas:Series和DataFrame删除指定轴上数据的方法
2018/11/10 Python
解决Opencv+Python cv2.imshow闪退问题
2020/04/24 Python
Python使用socket模块实现简单tcp通信
2020/08/18 Python
pycharm 多行批量缩进和反向缩进快捷键介绍
2021/01/15 Python
用HTML5中的Canvas结合公式绘制粒子运动的教程
2015/05/08 HTML / CSS
HTML5学习心得总结(推荐)
2016/07/08 HTML / CSS
公司庆典活动邀请函
2014/01/09 职场文书
安卓程序员求职信
2014/02/28 职场文书
工商局领导班子存在的问题整改措施思想汇报
2014/10/05 职场文书
2014年音乐教师工作总结
2014/12/03 职场文书
2014年移动公司工作总结
2014/12/08 职场文书
经营目标责任书
2015/05/08 职场文书
2015年度酒店客房部工作总结
2015/05/25 职场文书
mysql部分操作
2021/04/05 MySQL