@idio/websocket
@idio/websocket Establishes WebSocket Connections Between Clients And The Server.
yarn add @idio/websocket
npm i @idio/websocketTable Of Contents
- Table Of Contents
- API
websocket(server, config=): !Object<string, sendMessage>sendMessage(event, message): void- Copyright
API
The package is available by importing its default function:
import websocket from '@idio/websocket'
websocket(
server: !http.Server,
config=: !WebSocketConfig,
): !Object<string, sendMessage>
Sets up a listener for the UPGRADE event on the server, and stores all connected clients in the client list. When clients disconnect, they are removed from this list. The list is a hash object where each key is the accept key sent by the client, and values are the callback functions to send messages to those clients.
- server*
!http.Server - config
!WebSocketConfig(optional): Additional configuration.
WebSocketConfig: Options for the web socket protocol communication.
| Name | Type | Description | Default |
|---|---|---|---|
| log | boolean | Whether to log on connect and disconnect. | true |
| onMessage | (clientID: string, message: string) => void | The callback when a message is received from a client. | - |
| onConnect | (clientID: string) => void | The callback when a client is connected. | - |
With the following client-side implementation:
/* eslint-env browser */
const ws = new WebSocket(`ws://${location.host}`, 'json')
setInterval(() => {
if (ws.readyState == ws.OPEN) ws.send('')
}, 2000)
ws.addEventListener('message', async event => {
const { message, event: e } = JSON.parse(event.data)
console.log('Received %s:', e, message)
window.WSstatus.innerText = message
ws.send(navigator.userAgent)
})the server can be setup to listen for connections.
/* yarn example/ */
import core, { render } from '@idio/idio'
import websocket from '@idio/websocket'
(async () => {
const { url, server } = await core({
static: {
use: true,
root: 'example/frontend',
},
index(ctx) {
ctx.body = render(
<html>
<head>
<title>Websocket Example</title>
</head>
<body>
<h1>
Hello World.
</h1>
Server says: <span id="WSstatus" />
<script type="module" src="index.js"/>
</body>
</html>
, { addDoctype: true })
},
})
const clients = websocket(server, {
onConnect(clientId) {
clients[clientId]('handshake', 'welcome')
},
onMessage(clientId, message) {
console.log('Client %s says: %s', clientId, message)
},
})
console.log(url)
})()http://localhost:5000
Client connected.
Client FIM/Jvt9Ldb1J0HCx5ye8g== says:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0)
AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/71.0.3578.98 Safari/537.36
Client disconnected.sendMessage(
event: string,
message: *,
): void
- event*
string: The name of the event to send. - message*
*: The data, that will be serialised in JSON.
Copyright
|
© Art Deco™ for Idio 2020 |
|
|---|
WebSocket Node.JS implementation by Srushtika Neelakantam from Implementing a WebSocket server with Node.js
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent