欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

ExpressJS使用express-ws的實例詳解

 更新時間：2023年09月02日 12:06:21   作者：Erick-K  
這篇文章主要介紹了ExpressJS使用express-ws的實例代碼,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下

版本

"express": "~4.16.1",
"express-ws": "^5.0.2",

簡單使用

  • app.js
const express = require('express');
const app = express();
const expressWs = require('express-ws')(app) //混入app
app.ws('/ws',(ws,req)=>{
    ws.on('message',msg=>{
        console.log(msg)
        ws.send(msg)
    })
})
app.listen('3000')
  • 局部路由
//websocket.js
const express = require('express');
const router = express.Router();
router.ws('/router-ws',(ws,req)=>{
    ws.on('message',msg=>{
        console.log(msg)
        ws.send(msg)
    })
})
module.exports = router

app.js完整代碼

const express = require('express');
const app = express();
const expressWs = require('express-ws')(app) //混入app
app.ws('/ws',(ws,req)=>{
    ws.on('message',msg=>{
        console.log(msg)
        ws.send(msg)
    })
})
var webSocket = require('./websocket.js')
app.use(webSocket)
app.listen('3000')

封裝express-ws

將 “express-ws” 封裝，通過 express 的 router 模塊化

websocket.js

// 引入
const express = require('express');
const router = express.Router();
const expressWs = require('express-ws')

封裝通道類

  • 創(chuàng)建通道類 channel，引入router定義websocket連接組,調用時傳入路徑 path 進行區(qū)分
//類
class channel {
    router;
    constructor(props) {
        this.router = props;
    }
    createChannel(path) {
        // 建立通道
        this.router.ws('/' + path, (ws, req) => {
            ws.on('message', (msg) =>{
                console.log(msg)
            })
        })
    }
}
  • 調用方法
let channels = new channel(router)
//創(chuàng)建一個新的通道 路徑為：/ws
channels.createChannel('ws')
//訪問路徑： ws://localhost:3000/ws
  • 監(jiān)聽websocket實例，在外部函數(shù)監(jiān)聽實例返回參數(shù)，并通過 path 區(qū)分
//類
class channel {
    router;
    constructor(props) {
        this.router = props;
    }
    createChannel(path) {
        // 建立通道
        this.router.ws('/' + path, (ws, req) => {
            ws.on('message', (msg) => getMsg(msg, path))
        })
    }
}
//外部函數(shù)監(jiān)聽客戶端消息
let getMsg = (msg, from) => {
    switch (from) {
        case 'ws':
            console.log('ws:', msg);
            break;
    }
}
  • 根據(jù)路由分類存儲已連接用戶，添加 saveClients() 方法
//類
class channel {
    router;
    clients = {
        allClients: [],//存放通過當前類所創(chuàng)建的通道中所有已連接用戶
    };
constructor(props) {
    this.router = props;
}
createChannel(path) {
    this.clients[path] = []; //用于存放當前通道中的用戶
    // 建立通道
    this.router.ws('/' + path, (ws, req) => {
        // 保存用戶
        this.saveClients(ws, req, path)
        ws.on('message', (msg) => getMsg(msg, path))
    })
}
// 保存用戶
saveClients(socket, req, path) {
    let client = {
        id: req.query.id,
        socket,
    }
    this.clients.allClients.push(client)
    this.clients[path].push(client)
}
}
// 外部函數(shù)監(jiān)聽客戶端消息
let getMsg = (msg, from) => {
    switch (from) {
        case 'ws':
            console.log('ws:', msg);
            break;
    }
}

入口函數(shù) initWebSocket

編寫入口函數(shù)，通過入口函數(shù)引入app，操作 express-ws。將 .ws 方法混入app內

調用封裝的channel類，去創(chuàng)建通道

//初始化
let WS = null;
// 聲明一個通道類
let channels = null;
function initWebSocket(app) {
    WS = expressWs(app) //混入app, wsServer 存儲所有已連接實例
    // 創(chuàng)建通道
    channels = new channel(router)
    channels.createChannel('ws')
    //訪問路徑： ws://localhost:3000/ws
    app.use(router)
}

完整代碼：

websocket.js

//websocket.js
const express = require('express');
const router = express.Router();
const expressWs = require('express-ws')
// 初始化
let WS = null;
// 聲明一個通道類
let channels = null;
function initWebSocket(app) {
    WS = expressWs(app) //混入app, wsServer 存儲所有已連接實例
    // 創(chuàng)建通道
    channels = new channel(router)
    channels.createChannel('ws')
    channels.createChannel('ws2')
    app.use(router)
}
// 通道類
class channel {
    router;
    clients = {
        allClients: [],//存放通過當前類所創(chuàng)建的通道中所有已連接用戶
    };
constructor(props) {
    this.router = props;
}
createChannel(path) {
    this.clients[path] = []; //用于存放當前通道中的用戶
    // 建立通道
    this.router.ws('/' + path, (ws, req) => {
        // 保存用戶
        this.saveClients(ws, req, path)
        ws.on('message', (msg) => getMsg(msg, path))
        ws.on('close', (code) => close(code, path))
        ws.on('error', (e) => error(e, path))
    })
}
// 保存用戶
saveClients(socket, req, path) {
    let client = {
        id: req.query.id,
        socket,
    }
    this.clients.allClients.push(client)
    this.clients[path].push(client)
}
}
/**
 * 
 * @param {*} msg 消息內容
 * @param {String} from 消息來源
 */
// 監(jiān)聽消息
let getMsg = (msg, from) => {
    switch (from) {
        case 'ws':
            console.log('ws:', msg);
            break;
        case 'wsw':
            console.log('wsw:', msg);
            break;
    }
    SendMsgAll({ data: msg })
}
// 發(fā)送消息
let sendMsg = (client, data) => {
    if (!client) return
    client.send(JSON.stringify(data))
}
let close = (code) => {
    console.log('關閉連接', code);
}
let error = (e) => {
    console.log('error: ', e);
}
// 群發(fā)
/**
 * 
 * @param {String} path 需要發(fā)送的用戶來源 路由，默認全部
 * @param {*} data 發(fā)送的數(shù)據(jù)
 */
function SendMsgAll({ path = '/', data = "" }) {
    let allClientsList = Array.from(WS.getWss(path).clients)
    for (let key in allClientsList) {
        let client = allClientsList[key]
        if (client._readyState == 1) {
            sendMsg(client, data)
        }
    }
}
module.exports = {
    initWebSocket,
    SendMsgAll
}

app.js 掛載

const express = require('express');
const app = express();
// WebSocket 在JWT驗證之前引入掛載
const webSocket = require('./websocket')
webSocket.initWebSocket(app)
app.listen('3000')

源碼

Gitee源碼倉庫地址：源碼

到此這篇關于ExpressJS使用express-ws的文章就介紹到這了,更多相關ExpressJS使用express-ws內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

  • 微信小程序實現(xiàn)一鍵登錄

    微信小程序實現(xiàn)一鍵登錄

    這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)一鍵登錄，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-07-07
  • JS中如何優(yōu)雅的使用async await詳解

    JS中如何優(yōu)雅的使用async await詳解

    async表示異步,而await可以看作async wait,個人對async與await的簡單理解就是,我們可以用同步的方式去書寫異步代碼,這篇文章主要給大家介紹了關于JS中如何優(yōu)雅的使用async await的相關資料,需要的朋友可以參考下
    2021-10-10
  • js字符串操作方法實例分析

    js字符串操作方法實例分析

    這篇文章主要介紹了js字符串操作方法,實例分析了javascript中slice、substr及substring等方法的使用技巧,需要的朋友可以參考下
    2015-05-05
  • JavaScript中自定義事件用法分析

    JavaScript中自定義事件用法分析

    這篇文章主要介紹了JavaScript中自定義事件用法,較為詳細的分析了自定義事件的原理與具體用法,具有一定的參考借鑒價值,需要的朋友可以參考下
    2014-12-12
  • es6 super關鍵字的理解與應用實例分析

    es6 super關鍵字的理解與應用實例分析

    這篇文章主要介紹了es6 super關鍵字的理解與應用,結合實例形式分析了es6 super關鍵字的功能、原理、用法及相關操作注意事項,需要的朋友可以參考下
    2020-02-02
  • avalon js實現(xiàn)仿google plus圖片多張拖動排序附源碼下載

    avalon js實現(xiàn)仿google plus圖片多張拖動排序附源碼下載

    這篇文章主要介紹了avalon js實現(xiàn)仿google plus圖片多張拖動排序附源碼下載的相關資料,需要的朋友可以參考下
    2015-09-09
  • 五句話幫你輕松搞定js原型鏈

    五句話幫你輕松搞定js原型鏈

    這篇文章主要給大家介紹了關于js原型鏈的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2020-12-12
  • 五段實用的js高級技巧

    五段實用的js高級技巧

    五段實用的js高級技巧，一些不錯的小技巧，學習js的朋友可以看看。
    2011-12-12
  • 微信小程序嵌入騰訊視頻源過程詳解

    微信小程序嵌入騰訊視頻源過程詳解

    這篇文章主要介紹了微信小程序嵌入騰訊視頻源過程詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2019-08-08
  • Layui給switch添加響應事件的例子

    Layui給switch添加響應事件的例子

    今天小編就為大家分享一篇Layui給switch添加響應事件的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-09-09

最新評論