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 相关文章推荐
jQuery 获取对象 定位子对象
May 31 Javascript
用jQuery模拟页面加载进度条的实现代码
Dec 19 Javascript
JS 对输入框进行限制(常用的都有)
Jul 30 Javascript
jQuery中animate用法实例分析
Mar 09 Javascript
微信公众号支付H5调用支付解析
Nov 04 Javascript
深入理解React高阶组件
Sep 28 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
Jan 15 Javascript
详解vue.js数据传递以及数据分发slot
Jan 20 Javascript
webpack源码之loader机制详解
Apr 06 Javascript
基于vue实现web端超大数据量表格的卡顿解决
Apr 02 Javascript
简单了解JS打开url的方法
Feb 21 Javascript
ES6 十大特性简介
Dec 09 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获取一个字符串中间一部分字符的方法
2014/08/19 PHP
Laravel 4.2 中队列服务(queue)使用感受
2014/10/30 PHP
php抽奖概率算法(刮刮卡,大转盘)
2020/04/17 PHP
Laravel5.1 框架路由基础详解
2020/01/04 PHP
TP框架实现上传一张图片和批量上传图片的方法分析
2020/04/23 PHP
网页编辑器ckeditor和ckfinder配置步骤分享
2012/05/24 Javascript
js操作iframe的一些方法介绍
2013/06/25 Javascript
js处理json以及字符串的比较等常用操作
2013/09/08 Javascript
JavaScript简单实现网页回到顶部功能
2013/11/12 Javascript
在js文件中写el表达式取不到值的原因及解决方法
2013/12/23 Javascript
JavaScript中遍历对象的property的3种方法介绍
2014/12/30 Javascript
JavaScript判断变量是否为空的自定义函数分享
2015/01/31 Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
2015/04/02 Javascript
JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()
2016/08/11 Javascript
javascript表单控件实例讲解
2016/09/13 Javascript
Javascript面试经典套路reduce函数查重
2017/03/23 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
2018/08/07 Javascript
layDate插件设置开始和结束时间
2018/11/15 Javascript
js cavans实现静态滚动弹幕
2020/05/21 Javascript
jQuery开发仿QQ版音乐播放器
2020/07/10 jQuery
Linux下通过python访问MySQL、Oracle、SQL Server数据库的方法
2016/04/23 Python
python 爬虫出现403禁止访问错误详解
2017/03/11 Python
python爬虫基本知识
2018/03/05 Python
Pycharm 设置自定义背景颜色的图文教程
2018/05/23 Python
django将图片上传数据库后在前端显式的方法
2018/05/25 Python
对web.py设置favicon.ico的方法详解
2018/12/04 Python
解决tensorboard多个events文件显示紊乱的问题
2020/02/15 Python
Python join()函数原理及使用方法
2020/11/14 Python
C++如何引用一个已经定义过的全局变量
2014/08/25 面试题
介绍一下RMI的基本概念
2016/12/17 面试题
病人慰问信范文
2015/02/15 职场文书
python numpy中setdiff1d的用法说明
2021/04/22 Python
MySQL千万级数据表的优化实战记录
2021/08/04 MySQL
nginx内存池源码解析
2021/11/20 Servers
docker compose 部署 golang 的 Athens 私有代理问题
2022/04/28 Servers
正则表达式基础与常用验证表达式
2022/06/16 Javascript