wspack

4.3.1 • Public • Published

wspack

WsPack offers a WebSocket client & server scaffolding for an instant realtime app.

Websockets are great technology for:

  • broadcasting messages,
  • push notifications,
  • streaming,
  • server-side rendering,
  • hot module reloading etc.

The client supports a simple message queueing when socket is not ready.

USAGE

Run "npm start" and open multiple browsers on url: localhost:8000 to broadcast messages between different socket connections.

// EXAMPLE OF A CHAT
 
const { WsServer, WsClient } = require("wspack");
const port = 8000;
 
// CLIENT SETUP
 
const endpoint = `'ws://' +
  window.location.hostname +
  (window.location.port ? ':' + window.location.port : '${port}')`;
 
// client side handler of server commands
function messageHandler(cmd, payload) {
  var messages = document.getElementById("messages");
  switch (cmd) {
    case "message":
      messages.innerText += payload + "\n";
      break;
  }
}
 
function send() {
  var prompt = document.getElementById("prompt");
  var msgToSend = prompt.value || "";
  if (msgToSend) {
    prompt.value = "";
    wsClient.sendCommand("messageAll", msgToSend);
  }
}
 
// server side rendered/cached view w/ WebSocketClient
const view = `
<html>
<head>
  <style rel="text/stylesheet">
    #messages { 
      width: 300px; 
      height: 200px; 
      border: 1px solid #000; 
      padding: 2px; 
      overflow: auto; 
      text-wrap: true;
    }
    #prompt { 
      width: 250px; 
      margin-top: 5px; 
    }
  </style>
</head>
<body>
  <div id="messages"></div>
  <input type="text" id="prompt" value="" />
  <button onclick="send();">SEND</button>
</body>
<script type="text/javascript">
  ${WsClient.toString()}
  
  var wsClient = new WebSocketClient();
  var send = ${send.toString()};
  var messageHandler = ${messageHandler.toString()};
 
  wsClient.connect({
    URL: ${endpoint},
    autoReconnect: true,
    reconnectionDelay: 5000,
    onOpen: function() { console.log("Connection open!"); },
    onMessage: messageHandler,
    onError: console.error,
    onClose: console.log,
  });
</script>
</html>
`;
 
// SERVER SETUP
 
const ws = WsServer({
  port,
  log: (...args) => console.log(...args),
  error: (...args) => console.error(...args),
  requestListener: (req, resp) => {
    // http router
    switch (req.url) {
      case "/":
        resp.writeHead(200, {
          "Content-Type": "text/html"
        });
        resp.end(view, "utf-8");
        break;
 
      default:
        resp.writeHead(404, {
          "Content-Type": "text/plain"
        });
        resp.end("404 - Page not found!", "utf-8");
        break;
    }
  }
});
 
// handle commands from the client
ws.onSocketMessage = (msg, socket) => {
  console.log("client sends:", msg);
  try {
    const { command, payload } = JSON.parse(msg);
    switch (command) {
      // custom command broadcast
      case "messageAll":
        ws.broadcast("message", payload);
        break;
    }
  } catch (err) {
    console.error(err.message);
  }
};

Package Sidebar

Install

npm i wspack

Weekly Downloads

3

Version

4.3.1

License

ISC

Unpacked Size

14 kB

Total Files

8

Last publish

Collaborators

  • stormcrows