亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Websocket 向指定用戶發(fā)消息的方法

 更新時(shí)間:2020年01月09日 10:04:46   作者:lihao_李浩  
這篇文章主要介紹了Websocket 向指定用戶發(fā)消息的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

場(chǎng)景

用戶正常發(fā)送一個(gè)http請(qǐng)求,需要處理一個(gè)耗時(shí)很長(zhǎng)的任務(wù),有可能這個(gè)任務(wù)要處理好幾分鐘,在任務(wù)處理期間 后臺(tái)要不斷的發(fā)送當(dāng)前處理的進(jìn)度日志等信息,打印在前端。也就是說(shuō) 用戶先發(fā)出一個(gè)正常的http請(qǐng)求,后面的就由Websocket來(lái)完成

技術(shù)點(diǎn)

當(dāng)后端收到http請(qǐng)求后 如何確認(rèn)是哪一個(gè)socket發(fā)出的?

實(shí)現(xiàn)思路

  • 為每一個(gè)socket設(shè)置唯一socketId并存入cookie
  • 后端接收到http取出其中的cookie信息拿到socketId,循環(huán)找到此id的socket發(fā)送消息

代碼實(shí)現(xiàn)

前端代碼

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 () {
    // 關(guān)閉 websocket
    console.log("連接已關(guān)閉...正在重連...");
    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

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • TypeScript 工具泛型教程示例

    TypeScript 工具泛型教程示例

    這篇文章主要為大家介紹了TypeScript 工具泛型教程示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-09-09
  • 關(guān)于同時(shí)使用swiper和echarts遇到的問(wèn)題及解決方法

    關(guān)于同時(shí)使用swiper和echarts遇到的問(wèn)題及解決方法

    這篇文章主要介紹了關(guān)于同時(shí)使用swiper和echarts遇到的問(wèn)題及解決方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-04-04
  • 微信小程序8種數(shù)據(jù)通信的方式小結(jié)

    微信小程序8種數(shù)據(jù)通信的方式小結(jié)

    這篇文章主要介紹了微信小程序8種數(shù)據(jù)通信的方式小結(jié),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-02-02
  • JavaScipt選取文檔元素的方法(推薦)

    JavaScipt選取文檔元素的方法(推薦)

    下面小編就為大家?guī)?lái)一篇JavaScipt選取文檔元素的方法(推薦)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-08-08
  • JS實(shí)現(xiàn)搜索框文字可刪除功能

    JS實(shí)現(xiàn)搜索框文字可刪除功能

    本文給大家分享一段js代碼實(shí)現(xiàn)搜索框文字可刪除功能,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧
    2016-12-12
  • 詳解webpack2異步加載套路

    詳解webpack2異步加載套路

    這篇文章主要介紹了詳解webpack2異步加載套路,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-09-09
  • js關(guān)于getImageData跨域問(wèn)題的解決方法

    js關(guān)于getImageData跨域問(wèn)題的解決方法

    這篇文章主要為大家詳細(xì)介紹了js關(guān)于getImageData跨域問(wèn)題的解決方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-10-10
  • JS數(shù)組方法slice()用法實(shí)例分析

    JS數(shù)組方法slice()用法實(shí)例分析

    這篇文章主要介紹了JS數(shù)組方法slice()用法,結(jié)合實(shí)例形式分析了JavaScript數(shù)組slice()方法具體功能、用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
    2020-01-01
  • 微信小程序?qū)崿F(xiàn)驗(yàn)證碼倒計(jì)時(shí)效果

    微信小程序?qū)崿F(xiàn)驗(yàn)證碼倒計(jì)時(shí)效果

    這篇文章主要介紹了微信小程序?qū)崿F(xiàn)驗(yàn)證碼倒計(jì)時(shí)效果,手機(jī)登錄、填手機(jī)號(hào)獲取驗(yàn)證碼,倒計(jì)時(shí)后重新獲取效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-05-05
  • springMVC + easyui + $.ajaxFileUpload實(shí)現(xiàn)文件上傳注意事項(xiàng)

    springMVC + easyui + $.ajaxFileUpload實(shí)現(xiàn)文件上傳注意事項(xiàng)

    在使用easyUI做前端樣式展示時(shí),遇到了文件上傳的問(wèn)題,而且是在彈出層中提交表單,想做到不刷新頁(yè)面,所以選擇了使用ajaxFileUpload插件。下面通過(guò)本文給大家分享springMVC + easyui + $.ajaxFileUpload實(shí)現(xiàn)文件上傳注意事項(xiàng),需要的朋友參考下吧
    2017-04-04

最新評(píng)論