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 相关文章推荐
经常用的图片在容器中的水平垂直居中实例
Jun 10 Javascript
解决jQuery插件tipswindown与hintbox冲突
Nov 05 Javascript
jquery实现的鼠标下拉滚动置顶效果
Jul 24 Javascript
JS中artdialog弹出框控件之提交表单思路详解
Apr 18 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
Aug 05 Javascript
Bootstrap入门教程一Hello Bootstrap初识
Mar 02 Javascript
node.js调用Chrome浏览器打开链接地址的方法
May 17 Javascript
js随机生成一个验证码
Jun 01 Javascript
详解如何实现一个简单的 vuex
Feb 10 Javascript
Vue v-for循环之@click点击事件获取元素示例
Nov 09 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
Mar 16 Javascript
vue-cli4项目开启eslint保存时自动格式问题
Jul 13 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教程 预定义变量
2009/10/23 PHP
PHP访问数据库集群的方法小结
2016/03/14 PHP
Javascript实例教程(19) 使用HoTMetal(4)
2006/12/23 Javascript
Javascript下的keyCode键码值表
2007/04/10 Javascript
ExtJS PropertyGrid中使用Combobox选择值问题
2010/06/13 Javascript
使用简洁的jQuery方法实现隔行换色功能
2014/01/02 Javascript
JS实现在网页中弹出一个输入框的方法
2015/03/03 Javascript
jQuery切换所有复选框选中状态的方法
2015/07/02 Javascript
Javascript 普通函数和构造函数的区别
2016/11/05 Javascript
nodeJS删除文件方法示例
2016/12/25 NodeJs
vue中计算属性(computed)、methods和watched之间的区别
2017/07/27 Javascript
jQuery实现当拉动滚动条到底部加载数据的方法分析
2019/01/24 jQuery
Vue组件实现触底判断
2019/06/26 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
2019/12/16 Javascript
JS判断数组四种实现方法详解
2020/06/29 Javascript
使用Python操作Elasticsearch数据索引的教程
2015/04/08 Python
Python+tkinter使用40行代码实现计算器功能
2018/01/30 Python
Python3实现的判断环形链表算法示例
2019/03/07 Python
python3使用腾讯企业邮箱发送邮件的实例
2019/06/28 Python
详解numpy.meshgrid()方法使用
2019/08/01 Python
对tensorflow中tf.nn.conv1d和layers.conv1d的区别详解
2020/02/11 Python
CSS3 input框的实现代码类似Google登录的动画效果
2020/08/04 HTML / CSS
荷兰在线啤酒店:Beerwulf
2019/08/26 全球购物
Ego Shoes官网:英国时髦鞋类品牌
2020/10/19 全球购物
美国家居装饰购物网站:Amanda Lindroth
2020/03/25 全球购物
乌克兰巴士票购买网站:inBus
2021/03/12 全球购物
追悼会子女答谢词
2014/01/28 职场文书
学生手册评语
2014/05/05 职场文书
人力资源管理求职信
2014/08/07 职场文书
2014领导班子“四风问题”对照检查材料思想汇报(执法局)
2014/09/21 职场文书
基层干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
新郎答谢词
2015/01/04 职场文书
收银员岗位职责
2015/02/03 职场文书
挂职锻炼工作总结2015
2015/05/28 职场文书
如何理解Vue前后端数据交互与显示
2021/05/10 Vue.js
浅谈 JavaScript 沙箱Sandbox
2021/11/02 Javascript