Websocket 向指定用户发消息的方法


Posted in Javascript onJanuary 09, 2020

场景

用户正常发送一个http请求,需要处理一个耗时很长的任务,有可能这个任务要处理好几分钟,在任务处理期间 后台要不断的发送当前处理的进度日志等信息,打印在前端。也就是说 用户先发出一个正常的http请求,后面的就由Websocket来完成

技术点

当后端收到http请求后 如何确认是哪一个socket发出的?

实现思路

  • 为每一个socket设置唯一socketId并存入cookie
  • 后端接收到http取出其中的cookie信息拿到socketId,循环找到此id的socket发送消息

代码实现

前端代码

if (!Cookies.get('socketId')) {
  // 这里为模拟生成唯一id 建议 require('uuid')
  var uuid = Math.random() * 1000;
  Cookies.set('socketId', uuid)
}

function connectWebsocket() {
  let url = `ws://${document.location.host}`;

  var ws = new WebSocket(url);

  ws.onopen = function () {
    console.log("连接成功!");
    ws.send(
      JSON.stringify({
        type: "setSocketId",
        data: Cookies.get('socketId')
      })
    );
  };
  ws.onclose = function () {
    // 关闭 websocket
    console.log("连接已关闭...正在重连...");
    connectWebsocket()
  };
  ws.onmessage = res => {
    console.log("收到socket消息:", res.data)
    var data = JSON.parse(res.data)
    document.querySelector('#content').innerHTML += data.data;
  };
}

connectWebsocket()

后端代码

wss.on('connection', function connection(ws, req) {
    ws.req = req;
    ws.sendJson = function (json) {
      if (this.readyState == 1) {
        this.send(JSON.stringify(json))
      }
    }
    ws.on('message', function (message) {
      message = JSON.parse(message);
      switch (message.type) {
        case 'setSocketId':
          ws.socketId = message.data;
          console.log(ws.socketId)
          break;
      }
    });
});
app.post('/api/socket/msg', function (req, res) {
    var query = req.body;
    console.log(query)

    var socketId = req.cookies.socketId;

    res.wss.clients.forEach(ws => {
      if (ws.socketId == socketId && ws.readyState == 1) {
        ws.sendJson({
          type:'testMsg',
          data:query.msg
        });
      }
    })

    res.send({})
})

完整例子
demo

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

Javascript 相关文章推荐
JS判断对象是否存在的10种方法总结
Dec 23 Javascript
jQuery中:first选择器用法实例
Dec 30 Javascript
JavaScript AOP编程实例
Jun 16 Javascript
AngularJs 弹出模态框(model)
Apr 07 Javascript
JavaScript作用域示例详解
Jul 07 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
Jul 15 Javascript
JavaScript生成指定范围随机数和随机序列的方法
May 05 Javascript
Vue2.X 通过AJAX动态更新数据
Jul 17 Javascript
JavaScript循环遍历你会用哪些之小结篇
Sep 28 Javascript
JS实现transform实现扇子效果
Jan 17 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
Apr 13 Javascript
vue实现移动端拖动排序
Aug 21 Javascript
Vue快速实现通用表单验证的示例代码
Jan 09 #Javascript
JS实现商品橱窗特效
Jan 09 #Javascript
微信小程序实现页面浮动导航
Jan 08 #Javascript
微信小程序基于movable-view实现滑动删除效果
Jan 08 #Javascript
小程序自定义模板实现吸顶功能
Jan 08 #Javascript
微信小程序静默登录的实现代码
Jan 08 #Javascript
微信小程序wxs实现吸顶效果
Jan 08 #Javascript
You might like
PHP 5.0对象模型深度探索之绑定
2006/09/05 PHP
Windows IIS PHP 5.2 安装与配置方法
2009/06/08 PHP
PHP var_dump遍历对象属性的函数与应用代码
2010/06/04 PHP
PHP关联数组的10个操作技巧
2013/01/21 PHP
解析PHP无限级分类方法及代码
2013/06/21 PHP
JavaScript 给汉字排序实例代码
2008/06/28 Javascript
javascript一些不错的函数脚本代码
2008/09/10 Javascript
JavaScript flash复制库类 Zero Clipboard
2011/01/17 Javascript
关于JS 预解释的相关理解
2016/06/28 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
2016/09/20 Javascript
微信小程序 location API实例详解
2016/10/02 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
2016/11/24 Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
2016/12/28 Javascript
JS对象是否拥有某属性如何判断
2017/02/03 Javascript
JavaScript ES6中export、import与export default的用法和区别
2017/03/14 Javascript
利用Node.js批量抓取高清妹子图片实例教程
2018/08/02 Javascript
vue axios数据请求get、post方法及实例详解
2018/09/11 Javascript
Vue服务端渲染实践之Web应用首屏耗时最优化方案
2019/03/22 Javascript
Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)
2019/04/17 Javascript
layui prompt 设置允许空白提交的方法
2019/09/24 Javascript
Python version 2.7 required, which was not found in the registry
2014/08/26 Python
分享一个常用的Python模拟登陆类
2015/03/29 Python
利用Python抓取行政区划码的方法
2016/11/28 Python
Python后台开发Django会话控制的实现
2019/04/15 Python
python实现按首字母分类查找功能
2019/10/31 Python
在python中使用pymysql往mysql数据库中插入(insert)数据实例
2020/03/02 Python
韩都衣舍天猫官方旗舰店:天猫女装销售总冠军
2017/10/10 全球购物
澳大利亚工具仓库:Tools Warehouse
2018/10/15 全球购物
Anthropologie英国:美国家喻户晓的休闲服装和家居产品品牌
2018/12/05 全球购物
HomeAway澳大利亚:预订你的度假屋,公寓、度假村、别墅等
2019/02/20 全球购物
英国领先的独立时装店:Van Mildert
2019/10/28 全球购物
Kendra Scott官网:美国领先的时尚配饰品牌
2020/10/22 全球购物
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2016/01/06 面试题
家长会主持词开场白
2014/03/18 职场文书
表扬稿格式范文
2015/01/16 职场文书
Python jiaba库的使用详解
2021/11/23 Python