微信小程序websocket聊天室的实现示例代码


Posted in Javascript onFebruary 12, 2019

背景

最近做了一个微信小程序的即时通讯功能,之前我也做过node.js的websocket服务,不过是在web端应用的socket.io服务。小程序本身对http、websocket等连接均有诸多限制,所以这次项目选择了node.js自带的ws模块。

服务端

初始化一个node.js项目,引入ws模块

const webSocket = require('ws');

创建websocket实例,并设置监听端口

const wss = new webSocket.Server({
  port: 3001
});

定义wss实例方法,实现socket监听和信息发布。下面贴上简单的示例:

wss.on('connection', function connection(ws, req) {
  console.log('连接开启')
  
  //发生错误
  ws.on('error', function error(error) {
    console.log('error', error);
  });

  //断开连接
  ws.on('close', function close(close) {
    console.log( '已关闭');
  });

  ws.on('message', function message(message) {
    ws.send('客户端发来了一条消息')
  });

  //发送消息
  ws.send('连接已开启');
  ws.send(id + '已连接')
});

这样,一个简单的websocket服务就配置完成了。当然,问题远远不止这么简单。要想在小程序中进行通信,还需要解决下面几个问题。

域名

关于小程序服务端域名配置,小程序开发文档中如下提到

微信小程序websocket聊天室的实现示例代码

小程序请求地址只支持https或者wss协议,因此首先要配置的就是SSL证书。拿到SSL证书之后,在服务端做一下https的配置即可。

var fs = require('fs');
const options = {
  key: fs.readFileSync('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', 'utf8'),//证书地址
  cert: fs.readFileSync('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', 'utf8'),//证书地址
};
var https = require('https');
var server = https.createServer(options, app);

另外值得注意的是,websocket监听的端口号需要做一下代理,因为小程序如果不配置端口号时,所有请求的url都不可以带端口号。

多房间通信

先看一下广播的实现:

//广播方法
wss.broadcast = function broadcast(data) {
  wss.clients.forEach(function each(client) {
    client.send(data)
  });
};

wss对象的clients是一个存储着所有socket连接对象的数组,每条连接对象都可以调用各自的send方法发送信息。

在此基础上,我们可以进行一定的封装,用一个唯一的标识符映射到每一条socket连接,这样我们需要向特定的某个连接发送信息时,就可以找到该连接。

可以通过连接的url作为唯一标识:

let sockets = {}
 wss.on('connection', function connection(ws, req) {
    let id = req.url.slice(5);//截几位字符串根据自己实际获得的url来看
    sockets[id] = ws;
    ws.send(id + '已连接');
    ...

客户端每次连接时url后拼接一个唯一id,在服务端获取req.url并截取字符串拿到唯一id,并将该连接对象存储在全局的sockets下以便需要时使用。

在此基础上,可以继续封装诸如加入房间、离开房间、房间内通信、向特定用户私聊等功能,总体来说是对send方法的封装。值得注意的是send方法只能发送字符串,json对象需要转化成字符串再传入send。

下面是一个私聊的示例:

wss.notice = function notice(id, data, ws) {
  // 向指定id发送
  try {
    ws.send('正在发送...')
    var notice = JSON.stringify({
      type: 'notice',
      data: data
    })
    let target = sockets[id]
    if (target) {
      target.send('收到一条新消息')
      target.send(notice)
    } else {
      ws.send('目标信道已关闭')
    }
  } catch (err) {
    console.log(err)
  }
}

到这里,一个简单的聊天室服务端配置就基本完成了。

最终作品效果如下:

微信小程序websocket聊天室的实现示例代码

部分代码细节,请观众老爷们移步 微信小程序中聊天室的服务端和客户端配置示例 ^.^

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一些主流JS框架中DOMReady事件的实现小结
Feb 12 Javascript
淘宝搜索框效果实现分析
Mar 05 Javascript
jQuery select表单提交省市区城市三级联动核心代码
Jun 09 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
Oct 17 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
Dec 18 Javascript
jQuery树形插件jquery.simpleTree.js用法分析
Sep 05 Javascript
JS中对数组元素进行增删改移的方法总结
Dec 15 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
Vue-Router的使用方法
Sep 05 Javascript
JS实现进度条动态加载特效
Mar 25 Javascript
Angular进行简单单元测试的实现方法实例
Aug 16 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
Nov 17 Vue.js
深入探讨JavaScript的最基本部分之执行上下文
Feb 12 #Javascript
图文详解vue框架安装步骤
Feb 12 #Javascript
详解vue组件中使用路由方法
Feb 12 #Javascript
说说Vue.js中的functional函数化组件的使用
Feb 12 #Javascript
详解Vue用cmd创建项目
Feb 12 #Javascript
谈谈JavaScript中super(props)的重要性
Feb 12 #Javascript
微信小程序实现的自定义分享功能示例
Feb 12 #Javascript
You might like
由php的call_user_func传reference引发的思考
2010/07/23 PHP
php使用simplexml_load_file加载XML文件并显示XML的方法
2015/03/19 PHP
PHP判断一个数组是另一个数组子集的方法详解
2017/07/31 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
Laravel框架在本地虚拟机快速安装的方法详解
2018/06/11 PHP
laravel-admin解决表单select联动时,编辑默认没选上的问题
2019/09/30 PHP
一个简单的网站访问JS计数器 刷新1次加1次访问
2012/09/20 Javascript
使用typeof判断function是否存在于上下文
2014/08/14 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
2015/05/25 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
2015/08/24 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
2016/05/27 Javascript
jQuery实现底部浮动窗口效果
2016/09/07 Javascript
轻松理解JavaScript之AJAX
2017/03/15 Javascript
微信小程序新增的拖动组件movable-view使用教程
2017/05/20 Javascript
js注册时输入合法性验证方法
2017/10/21 Javascript
Angular实现下拉框模糊查询功能示例
2018/01/03 Javascript
js核心基础之构造函数constructor用法实例分析
2019/05/11 Javascript
JavaScript Date对象功能与用法学习记录
2020/04/28 Javascript
JS实现前端路由功能示例【原生路由】
2020/05/29 Javascript
pyside写ui界面入门示例
2014/01/22 Python
利用Python如何批量修改数据库执行Sql文件
2018/07/29 Python
Python Learning 列表的更多操作及示例代码
2018/08/22 Python
Python 最大概率法进行汉语切分的方法
2018/12/14 Python
在Python中字典根据多项规则排序的方法
2019/01/21 Python
Python数据类型之列表和元组的方法实例详解
2019/07/08 Python
Django项目主urls导入应用中views的红线问题解决
2019/08/10 Python
Python 转换文本编码实现解析
2019/08/27 Python
python解析xml文件方式(解析、更新、写入)
2020/03/05 Python
Python导入模块包原理及相关注意事项
2020/03/25 Python
无谷物狗粮:Pooch & Mutt
2018/05/23 全球购物
石油大学毕业生自荐信
2014/01/28 职场文书
2014年行风建设工作总结
2014/12/01 职场文书
预备党员自我评价范文
2015/03/04 职场文书
2015年小学英语教师工作总结
2015/05/12 职场文书
防止web项目中的SQL注入
2021/12/06 MySQL
Android自定义scrollview实现回弹效果
2022/04/01 Java/Android