微信小程序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 相关文章推荐
javascript 框架小结 个人工作经验
Jun 13 Javascript
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
Nov 11 Javascript
JS修改css样式style浅谈
May 06 Javascript
文本框中禁止非数字字符输入比如手机号码、邮编
Aug 19 Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
Sep 03 Javascript
JavaScript中的return语句简单介绍
Dec 07 Javascript
AngularJS利用Controller完成URL跳转
Aug 09 Javascript
javascript基础知识讲解
Jan 11 Javascript
Bootstrap 填充Json数据的实例代码
Jan 11 Javascript
十大热门的JavaScript框架和库
Mar 21 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
May 18 Javascript
vue点击当前路由高亮小案例
Sep 26 Javascript
深入探讨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实现读取内存顺序号
2015/03/29 PHP
PHP数组去重比较快的实现方式
2016/01/19 PHP
php抽奖概率算法(刮刮卡,大转盘)
2020/04/17 PHP
PHP实现的AES 128位加密算法示例
2019/09/16 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
javascript multibox 全选
2009/03/22 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
2013/06/21 Javascript
JS按字节截取字符长度实例
2013/11/20 Javascript
jQuery中slideUp()方法用法分析
2014/12/24 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
2015/09/17 Javascript
Node.js本地文件操作之文件拷贝与目录遍历的方法
2016/02/16 Javascript
Knockoutjs 学习系列(一)ko初体验
2016/06/07 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
2016/12/13 Javascript
jQuery 判断元素整理汇总
2017/02/28 Javascript
Angular2数据绑定详解
2017/04/18 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
2017/05/17 Javascript
详解基于mpvue的小程序markdown适配解决方案
2018/05/08 Javascript
js实现轮播图的完整代码
2020/10/26 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
2019/04/23 Javascript
记一次react前端项目打包优化的方法
2020/03/30 Javascript
Jquery Fade用法详解
2020/11/06 jQuery
[02:02]2018DOTA2亚洲邀请赛Mineski赛前采访
2018/04/04 DOTA
[01:30:55]VG vs Mineski Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
Python中集合的内建函数和内建方法学习教程
2015/08/19 Python
hmac模块生成加入了密钥的消息摘要详解
2018/01/11 Python
Python中的groupby分组功能的实例代码
2018/07/11 Python
Python面向对象之继承和组合用法实例分析
2018/08/27 Python
Django框架的中的setting.py文件说明详解
2018/10/15 Python
Pycharm2017版本设置启动时默认自动打开项目的方法
2018/10/29 Python
python实现在函数图像上添加文字和标注的方法
2019/07/08 Python
django 通过url实现简单的权限控制的例子
2019/08/16 Python
定义css设备类型-Media Queries图表简介及使用方法
2013/01/21 HTML / CSS
申请任职学生会干部自荐书范文
2014/02/13 职场文书
文明村创建实施方案
2014/03/27 职场文书
介绍信的写法
2015/01/31 职场文书
2015年社区文体活动总结
2015/03/25 职场文书