# wspack

> Websocket client & server starter for realtime apps.

Latest version **4.3.1** (published 2020-06-29) · ISC license · 0 weekly downloads

## Install

```sh
npm install wspack
pnpm add wspack
yarn add wspack
bun add wspack
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.3.1 |
| Published | 2020-06-29 |
| First published | 2017-10-14 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 13.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | stormcrows |
| Maintainers | stormcrows |
| Keywords | websocket, websockets, socket, sockets, command, broadcast, streaming, message, queue, push, notification, server, client, realtime, ssr, hmr, framework, chat |

## Links

- npm: https://www.npmjs.com/package/wspack
- Repository: https://github.com/stormcrows/wspack
- Homepage: https://github.com/stormcrows/wspack#readme
- Issues: https://github.com/stormcrows/wspack/issues
- npm.io page: https://npm.io/package/wspack

## Dependencies (1)

- [websocket](https://npm.io/package/websocket.md) ^1.0.31

## Alternatives

- [@opentelemetry/exporter-zipkin](https://npm.io/package/@opentelemetry/exporter-zipkin.md) — 14.8M weekly downloads
- [pusher-js](https://npm.io/package/pusher-js.md) — 2.0M weekly downloads
- [browserify](https://npm.io/package/browserify.md) — 1.7M weekly downloads
- [sqs-consumer](https://npm.io/package/sqs-consumer.md) — 1.7M weekly downloads
- [@sanity/eventsource](https://npm.io/package/@sanity/eventsource.md) — 930.8K weekly downloads

## Recent versions

- 4.3.1 (latest) — 2020-06-29
- 4.3.0 — 2017-11-10
- 4.2.5 — 2017-11-06
- 4.2.4 — 2017-10-23
- 4.2.3 — 2017-10-23
- 4.2.2 — 2017-10-22
- 4.2.1 — 2017-10-22
- 4.2.0 — 2017-10-22
- 4.1.0 — 2017-10-20
- 4.0.12 — 2017-10-19
- 4.0.11 — 2017-10-18
- 4.0.10 — 2017-10-18
- 4.0.8 — 2017-10-18
- 4.0.7 — 2017-10-18
- 4.0.6 — 2017-10-18
- … 13 more at https://npm.io/package/wspack/versions

## README

# 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.

```javascript
// 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);
  }
};
```

---
_Source: https://npm.io/package/wspack · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._