@qortexdevs/y-websocket
TypeScript icon, indicating that this package has built-in type declarations

1.4.2 • Public • Published

Latest version is expiremental, do not try to use it. Stick with 1.3.13

y-websocket 🎩

WebSocket Provider for Yjs forked from y-websocket for HTTPS support

The Websocket Provider implements a classical client server model. Clients connect to a single endpoint over Websocket. The server distributes awareness information and document updates among clients.

The Websocket Provider is a solid choice if you want a central source that handles authentication and authorization. Websockets also send header information and cookies, so you can use existing authentication mechanisms with this server.

  • Supports cross-tab communication. When you open the same document in the same browser, changes on the document are exchanged via cross-tab communication (Broadcast Channel and localStorage as fallback).
  • Supports exchange of awareness information (e.g. cursors).

Quick Start

Client Code:

import * as Y from 'yjs'
import { WebsocketProvider } from 'y-websocket'

const doc = new Y.Doc()
const wsProvider = new WebsocketProvider('ws://localhost:1234', 'my-roomname', doc)

wsProvider.on('status', event => {
  console.log(event.status) // logs "connected" or "disconnected"
})

Client Code in Node.js

The WebSocket provider requires a WebSocket object to create connection to a server. You can polyfill WebSocket support in Node.js using the ws package.

const wsProvider = new WebsocketProvider('ws://localhost:1234', 'my-roomname', doc, { WebSocketPolyfill: require('ws') })

API

import { WebsocketProvider } from 'y-websocket'
wsProvider = new WebsocketProvider(serverUrl: string, room: string, ydoc: Y.Doc [, wsOpts: WsOpts])
Create a new websocket-provider instance. As long as this provider, or the connected ydoc, is not destroyed, the changes will be synced to other clients via the connected server. Optionally, you may specify a configuration object. The following default values of wsOpts can be overwritten.
wsOpts = {
  // Set this to `false` if you want to connect manually using wsProvider.connect()
  connect: true,
  // Specify a query-string that will be url-encoded and attached to the `serverUrl`
  // I.e. params = { auth: "bearer" } will be transformed to "?auth=bearer"
  params: {}, // Object<string,string>
  // You may polyill the Websocket object (https://developer.mozilla.org/en-US/docs/Web/API/WebSocket).
  // E.g. In nodejs, you could specify WebsocketPolyfill = require('ws')
  WebsocketPolyfill: Websocket,
  // Specify an existing Awareness instance - see https://github.com/yjs/y-protocols
  awareness: new awarenessProtocol.Awareness(ydoc)
}
wsProvider.wsconnected: boolean
True if this instance is currently connected to the server.
wsProvider.wsconnecting: boolean
True if this instance is currently connecting to the server.
wsProvider.shouldConnect: boolean
If false, the client will not try to reconnect.
wsProvider.bcconnected: boolean
True if this instance is currently communicating to other browser-windows via BroadcastChannel.
wsProvider.synced: boolean
True if this instance is currently connected and synced with the server./dd> wsProvider.disconnect()
Disconnect from the server and don't try to reconnect.
wsProvider.connect()
Establish a websocket connection to the websocket-server. Call this if you recently disconnected or if you set wsOpts.connect = false.
wsProvider.destroy()
Destroy this wsProvider instance. Disconnects from the server and removes all event handlers.
wsProvider.on('sync', function(isSynced: boolean))
Add an event listener for the sync event that is fired when the client received content from the server.

Websocket Server


Start a HTTP y-websocket server:
PORT=1234 npx y-websocket-server

Start a HTTPS y-websocket server:
MODE=https PORT=1234 SSL_PRIVATE_KEY_PATH=/path/to/privkey.pem SSL_FULL_CHAIN_PATH=/path/to/fullchain.pem npx y-websocket-server

Since npm symlinks the y-websocket-server executable from your local ./node_modules/.bin folder, you can simply run npx. The PORT environment variable already defaults to 1234. The MODE environment variable defaukts to http.

To enable HTTPS set

  • MODE to https
  • SSL_PRIVATE_KEY_PATH to privatekey.pem location
  • SSL_FULL_CHAIN_PATH to fullchain.pem location

Websocket Server with Persistence

Persist document updates in a LevelDB database.

See LevelDB Persistence for more info.
HTTPS

PORT=1234 YPERSISTENCE=./dbDir node ./node_modules/y-websocket/bin/server.js

HTTPS
MODE=https PORT=1234 SSL_PRIVATE_KEY_PATH=/path/to/privkey.pem SSL_FULL_CHAIN_PATH=/path/to/fullchain.pem YPERSISTENCE=./dbDir node ./node_modules/y-websocket/bin/server.js

Websocket Server with HTTP callback (MODE=http only)

Send a debounced callback to an HTTP server (POST) on document update.

Can take the following ENV variables:

  • CALLBACK_URL : Callback server URL

  • CALLBACK_DEBOUNCE_WAIT : Debounce time between callbacks (in ms). Defaults to 2000 ms

  • CALLBACK_DEBOUNCE_MAXWAIT : Maximum time to wait before callback. Defaults to 10 seconds

  • CALLBACK_TIMEOUT : Timeout for the HTTP call. Defaults to 5 seconds

  • CALLBACK_OBJECTS : JSON of shared objects to get data:

    {
        "OBJECT_NAME": "OBJECT_TYPE"
    }
CALLBACK_URL=http://localhost:3000/ CALLBACK_OBJECTS='{"prosemirror":"XmlFragment"}' npm start

This sends a debounced callback to localhost:3000 2 seconds after receiving an update (default DEBOUNCE_WAIT) with the data of an XmlFragment named "prosemirror" in the body.

License

The MIT License

Sponsors

Conspectus — online notes

Readme

Keywords

Package Sidebar

Install

npm i @qortexdevs/y-websocket

Weekly Downloads

4

Version

1.4.2

License

MIT

Unpacked Size

38.7 kB

Total Files

9

Last publish

Collaborators

  • qortexdevs