w-serv-broadcast

An operator for data control and broadcast between nodejs and browser.

Documentation

To view documentation or get support, visit docs.

Parts

w-serv-broadcast includes 2 parts:

• w-serv-broadcast-server: for nodejs server
• w-serv-broadcast-client: for nodejs and browser client

Installation

Using npm(ES6 module):

npm i w-serv-broadcast

Example for w-serv-broadcast-server:

Link: [dev source code]

import WConverhpServer from 'w-converhp/src/WConverhpServer.mjs'
import WServBroadcastServer from './src/WServBroadcastServer.mjs'
import WConverhpServer from 'w-converhp/src/WConverhpServer.mjs'
import WServBroadcastServer from './src/WServBroadcastServer.mjs'

let ms = []

let opt = {
    port: 8080,
    apiName: 'api',
    pathStaticFiles: '.', //要存取專案資料夾下web.html, 故不能給dist
    verifyConn: () => {
        return true
    },
}

//instWConverServer
let instWConverServer = new WConverhpServer(opt)

//instWConverServer
instWConverServer = new WServBroadcastServer(instWConverServer)

//啟動後要等client連入才有辦法收broadcast, 故須延遲觸發
setTimeout(() => {

    let n = 0
    let t = setInterval(() => {
        n++
        instWConverServer.broadcast(`n=${n}`)
        console.log('broadcast n', n)
        ms.push({ broadcast: n })
        if (n >= 5) {
            clearInterval(t)
        }
    }, 1500)

    //broadcast給前端還需要時間處理, 故不能於滿足條件n就stop
    setTimeout(() => {
        instWConverServer.clearBroadcast()
        instWConverServer.stop()
        console.log('ms', ms)
    }, 10000)

}, 3000)

instWConverServer.on('clientEnter', function(data) {
    console.log(`Server[port:${opt.port}]: clientEnter`, data)
})
instWConverServer.on('clientLeave', function(data) {
    console.log(`Server[port:${opt.port}]: clientLeave`, data)
})
instWConverServer.on('clientChange', function(data) {
    console.log(`Server[port:${opt.port}]: clientChange`, data)
})
instWConverServer.on('broadcast', function(data) {
    console.log(`Server[port:${opt.port}]: broadcast`, data)
})
instWConverServer.on('error', function(err) {
    console.log(`Server[port:${opt.port}]: error`, err)
})
instWConverServer.on('handler', function(data) {
    // console.log(`Server[port:${opt.port}]: handler`, data)
})

// Server[port:8080]: clientEnter {random}
// Server[port:8080]: clientChange 1
// broadcast n 1
// broadcast n 2
// broadcast n 3
// broadcast n 4
// broadcast n 5
// ms [
//   { broadcast: 1 },
//   { broadcast: 2 },
//   { broadcast: 3 },
//   { broadcast: 4 },
//   { broadcast: 5 }
// ]
// Server[port:8080]: clientLeave {random}
// Server[port:8080]: clientChange 0

Example for w-serv-broadcast-client in node.js:

Link: [dev source code]

import FormData from 'form-data'
import WConverhpClient from 'w-converhp/src/WConverhpClient.mjs'
import WServBroadcastClient from './src/WServBroadcastClient.mjs'

let ms = []

let opt = {
    FormData,
    url: 'http://localhost:8080',
    apiName: 'api',
}

//instWConverClient
let instWConverClient = new WConverhpClient(opt)

//instWConverClient
instWConverClient = new WServBroadcastClient(instWConverClient)

instWConverClient.on('broadcast', function(data) {
    console.log(`broadcast`, data)
    ms.push({ receive: data })
})
instWConverClient.on('openOnce', function() {
    console.log(`openOnce`)
    ms.push({ event: 'openOnce' })
})
instWConverClient.on('open', function() {
    console.log(`open`)
    ms.push({ event: 'open' })
})
instWConverClient.on('error', function(err) {
    console.log(`error`, err)
})

setTimeout(() => {
    instWConverClient.clearBroadcast()
    console.log('ms', ms)
}, 13000)

// openOnce
// open
// broadcast n=1
// broadcast n=2
// broadcast n=3
// broadcast n=4
// broadcast n=5
// ms [
//   { event: 'openOnce' },
//   { event: 'open' },
//   { receive: 'n=1' },
//   { receive: 'n=2' },
//   { receive: 'n=3' },
//   { receive: 'n=4' },
//   { receive: 'n=5' }
// ]

In a browser(UMD module):

Add script for w-serv-broadcast-client.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/w-serv-broadcast-client.umd.js"></script>

Example for w-serv-broadcast-client in web:

Link: [dev source code]

<script src="https://cdn.jsdelivr.net/npm/w-converhp/dist/w-converhp-client.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/w-serv-broadcast-client.umd.js"></script>

//wcc
let WConverhpClient = window['w-converhp-client']
let wcc = new WConverhpClient({
    // FormData,
    url: 'http://localhost:9000',
})

//wsdc
let WServBroadcastClient = window['w-serv-broadcast-client']
    
let opt = {
    FormData,
    url: 'http://localhost:8080',
    apiName: 'api',
}

//instWConverClient
let instWConverClient = new WConverhpClient(opt)

//instWConverClient
instWConverClient = new WServBroadcastClient(instWConverClient)

instWConverClient.on('broadcast', function(data) {
    console.log(`broadcast`, data)
})
instWConverClient.on('openOnce', function() {
    console.log(`openOnce`)
})
instWConverClient.on('open', function() {
    console.log(`open`)
})
instWConverClient.on('error', function(err) {
    console.log(`error`, err)
})
// openOnce
// open
// broadcast,n=1
// broadcast,n=2
// broadcast,n=3
// broadcast,n=4
// broadcast,n=5