微信小程序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 相关文章推荐
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
Apr 01 Javascript
用JS剩余字数计算的代码
Jul 03 Javascript
浏览器脚本兼容 文本框中,回车键触发事件的兼容
Jun 21 Javascript
extjs之去除s.gif的影响
Dec 25 Javascript
JavaScript加强之自定义event事件
Sep 21 Javascript
使用javascript控制cookie显示和隐藏背景图
Feb 12 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
Dec 18 Javascript
iScroll.js 使用方法参考
May 16 Javascript
angular.js 路由及页面传参示例
Feb 24 Javascript
JS三级联动代码格式实例详解
Dec 30 Javascript
JavaScript检测是否开启了控制台(F12调试工具)
Oct 02 Javascript
PHP 502bad gateway原因及解决方案
Nov 13 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中使用gettext来支持多语言的方法
2011/05/02 PHP
解决PHP mysql_query执行超时(Fatal error: Maximum execution time …)
2013/07/03 PHP
php实现utf-8转unicode函数分享
2015/01/06 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
php利用ob_start()清除输出和选择性输出的方法
2018/01/18 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
thinkphp5.1 框架导入/导出excel文件操作示例
2020/05/25 PHP
javascript优先加载笔记代码
2008/09/30 Javascript
jquery 防止表单重复提交代码
2010/01/21 Javascript
使用javascript获取页面名称
2014/12/23 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
2015/07/03 Javascript
JavaScript编写简单的计算器
2015/11/25 Javascript
JavaScript页面实时显示当前时间实例代码
2016/10/23 Javascript
node.js实现复制文本到剪切板的功能
2017/01/23 Javascript
Javascript基础回顾之(三) js面向对象
2017/01/31 Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
2017/04/16 Javascript
关于vue.extend和vue.component的区别浅析
2017/08/16 Javascript
浅谈Node.js爬虫之网页请求模块
2018/01/11 Javascript
JS继承定义与使用方法简单示例
2020/02/19 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
2020/02/24 Javascript
JavaScript 实现继承的几种方式
2021/02/19 Javascript
[48:11]完美世界DOTA2联赛 Magma vs GXR 第二场 11.07
2020/11/10 DOTA
Python实现的朴素贝叶斯分类器示例
2018/01/06 Python
详解关于Django中ORM数据库迁移的配置
2018/10/08 Python
Python安装pycurl失败的解决方法
2018/10/15 Python
python2.7实现邮件发送功能
2018/12/12 Python
Django用户认证系统 组与权限解析
2019/08/02 Python
numpy 声明空数组详解
2019/12/05 Python
python求前n个阶乘的和实例
2020/04/02 Python
opencv 图像滤波(均值,方框,高斯,中值)
2020/07/08 Python
Pythonic版二分查找实现过程原理解析
2020/08/11 Python
物业总经理岗位职责
2014/02/28 职场文书
四年级学生期末评语
2014/12/26 职场文书
《折线统计图》教学反思
2016/02/22 职场文书
MySQL into_Mysql中replace与replace into用法案例详解
2021/09/14 MySQL
Appium中scroll和drag_and_drop根据元素位置滑动
2022/02/15 Python