Convert Figma logo to code with AI

sockjs logosockjs-client

WebSocket emulation - Javascript client

8,437
1,298
8,437
33
View on GitHubView on NPM

Top Related Projects

faye's avatar

faye

4,391

Simple pub/sub messaging for the web

socketio's avatar

socket.io-client

10,615

Realtime application framework (client)

primus's avatar

primus

4,472

:zap: Primus, the creator god of the transformers & an abstraction layer for real-time to prevent module lock-in.

pusher's avatar

pusher-js

2,106

Pusher Javascript library

joewalnes's avatar

reconnecting-websocket

4,227

A small decorator for the JavaScript WebSocket API that automatically reconnects

Quick Overview

SockJS-client is a JavaScript library that provides a WebSocket-like object. It offers a consistent interface for real-time communication between browsers and web servers, falling back to alternative transport methods when WebSockets are not available. This library is designed to work with SockJS-node on the server side.

Pros

  • Cross-browser compatibility, including support for older browsers
  • Automatic fallback to alternative transport methods when WebSockets are unavailable
  • Consistent API that mimics the WebSocket interface
  • Supports various server-side languages and frameworks

Cons

  • Slightly larger file size compared to native WebSocket implementations
  • May introduce additional latency when falling back to non-WebSocket transports
  • Requires server-side implementation of SockJS protocol
  • Limited support for binary data transmission

Code Examples

  1. Creating a SockJS connection:
const socket = new SockJS('http://localhost:9999/echo');

socket.onopen = function() {
  console.log('Connection opened');
};

socket.onmessage = function(e) {
  console.log('Received message:', e.data);
};

socket.onclose = function() {
  console.log('Connection closed');
};
  1. Sending a message:
socket.send('Hello, SockJS!');
  1. Closing the connection:
socket.close();

Getting Started

  1. Install SockJS-client using npm:
npm install sockjs-client
  1. Import and use SockJS in your JavaScript code:
import SockJS from 'sockjs-client';

const socket = new SockJS('http://localhost:9999/echo');

socket.onopen = function() {
  console.log('Connection opened');
  socket.send('Hello, SockJS!');
};

socket.onmessage = function(e) {
  console.log('Received message:', e.data);
};

socket.onclose = function() {
  console.log('Connection closed');
};

Make sure to have a SockJS server running at the specified URL to establish the connection.

Competitor Comparisons

faye logo

faye

4,391

Simple pub/sub messaging for the web

Pros of Faye

  • Supports both server-side and client-side implementations
  • Provides a higher-level abstraction for real-time communication
  • Offers built-in support for multiple transport protocols

Cons of Faye

  • Less actively maintained compared to SockJS-client
  • May have a steeper learning curve for beginners
  • Limited browser support for older versions

Code Comparison

SockJS-client:

var sock = new SockJS('http://localhost:8080/echo');
sock.onopen = function() {
    console.log('open');
    sock.send('test');
};

Faye:

var client = new Faye.Client('http://localhost:8000/faye');
client.subscribe('/channel', function(message) {
    console.log('Received message:', message);
});

Key Differences

  • SockJS-client focuses on providing a WebSocket-like API with fallback options
  • Faye offers a publish-subscribe messaging pattern
  • SockJS-client has better cross-browser compatibility
  • Faye provides more advanced features like message queuing and clustering

Use Cases

  • SockJS-client: Ideal for applications requiring low-latency, real-time communication with broad browser support
  • Faye: Better suited for complex pub/sub scenarios and applications that need both client and server-side implementations

Community and Ecosystem

  • SockJS-client has a larger user base and more frequent updates
  • Faye has a smaller but dedicated community with comprehensive documentation
socketio logo

socket.io-client

10,615

Realtime application framework (client)

Pros of socket.io-client

  • Built-in support for real-time bidirectional event-based communication
  • Automatic reconnection and fallback to long-polling if WebSocket is unavailable
  • Extensive documentation and large community support

Cons of socket.io-client

  • Larger bundle size compared to SockJS-client
  • Requires Socket.IO server, limiting flexibility with other server implementations
  • Can be overkill for simple WebSocket needs

Code Comparison

SockJS-client:

var sock = new SockJS('http://localhost:8080/echo');
sock.onopen = function() {
    console.log('open');
    sock.send('test');
};
sock.onmessage = function(e) {
    console.log('message', e.data);
};

socket.io-client:

const socket = io('http://localhost:3000');
socket.on('connect', () => {
    console.log('connected');
    socket.emit('message', 'test');
});
socket.on('message', (data) => {
    console.log('message', data);
});

Both libraries provide WebSocket-like functionality, but socket.io-client offers a more feature-rich API with built-in event handling and reconnection logic. SockJS-client focuses on providing a WebSocket-like API with fallback options for older browsers. The choice between the two depends on specific project requirements and the desired level of abstraction.

primus logo

primus

4,472

:zap: Primus, the creator god of the transformers & an abstraction layer for real-time to prevent module lock-in.

Pros of Primus

  • Supports multiple transport protocols (WebSockets, Engine.IO, SockJS, etc.)
  • Provides a unified API across different transports
  • Offers built-in plugins for additional functionality

Cons of Primus

  • Larger codebase and potentially higher learning curve
  • May have more overhead due to its abstraction layer
  • Less focused on a single transport method

Code Comparison

SockJS-client:

var sock = new SockJS('http://localhost:8080/echo');
sock.onopen = function() {
    console.log('open');
    sock.send('test');
};

Primus:

var primus = new Primus('http://localhost:8080');
primus.on('open', function() {
    console.log('open');
    primus.write('test');
});

Key Differences

  1. API: SockJS-client uses a WebSocket-like API, while Primus provides its own abstracted API.
  2. Transport: SockJS-client focuses on SockJS protocol, whereas Primus supports multiple transports.
  3. Ecosystem: Primus has a plugin system, while SockJS-client is more focused on core functionality.
  4. Size: SockJS-client is generally lighter and more focused, while Primus offers more features at the cost of increased complexity.

Both libraries aim to provide real-time communication capabilities, but they differ in their approach and feature set. The choice between them depends on specific project requirements and preferences.

pusher logo

pusher-js

2,106

Pusher Javascript library

Pros of pusher-js

  • Easier to set up and use, with a more straightforward API
  • Built-in support for presence channels and client events
  • Better documentation and community support

Cons of pusher-js

  • Requires a paid Pusher account for production use
  • Less flexible for custom WebSocket implementations
  • Potentially higher latency due to reliance on Pusher's infrastructure

Code Comparison

SockJS-client:

var sock = new SockJS('http://localhost:8080/echo');
sock.onopen = function() {
    console.log('open');
    sock.send('test');
};
sock.onmessage = function(e) {
    console.log('message', e.data);
};

pusher-js:

var pusher = new Pusher('APP_KEY');
var channel = pusher.subscribe('my-channel');
channel.bind('my-event', function(data) {
    console.log('Received:', data);
});
pusher.connection.bind('connected', function() {
    console.log('Connected to Pusher');
});

Both libraries provide real-time communication capabilities, but SockJS-client offers more flexibility and control over the WebSocket connection, while pusher-js provides a higher-level abstraction with additional features like presence channels and client events. SockJS-client is better suited for custom WebSocket implementations, while pusher-js is ideal for rapid development and scenarios where Pusher's additional features are beneficial.

joewalnes logo

reconnecting-websocket

4,227

A small decorator for the JavaScript WebSocket API that automatically reconnects

Pros of reconnecting-websocket

  • Lightweight and focused solely on WebSocket reconnection
  • Simple to use and integrate into existing projects
  • Automatically handles reconnection attempts with customizable options

Cons of reconnecting-websocket

  • Limited to WebSocket protocol only, unlike SockJS which supports fallback options
  • Less actively maintained compared to SockJS client
  • Fewer features and less robust than SockJS for complex real-time applications

Code Comparison

reconnecting-websocket:

var socket = new ReconnectingWebSocket('ws://....');
socket.onopen = function() { ... };
socket.onmessage = function(message) { ... };

SockJS client:

var socket = new SockJS('http://....');
socket.onopen = function() { ... };
socket.onmessage = function(e) { ... };

Summary

reconnecting-websocket is a lightweight solution focused on WebSocket reconnection, making it simple to use for basic WebSocket applications. However, it lacks the fallback options and extensive features provided by SockJS client. SockJS offers a more robust solution for complex real-time applications, supporting various transport protocols and providing better compatibility across different environments. The choice between the two depends on the specific requirements of your project, with reconnecting-websocket being suitable for simpler WebSocket-only needs and SockJS client for more comprehensive real-time communication solutions.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

SockJS-client

npm versionDependenciesChatContributor Covenant BrowserStack Status

SockJS for enterprise

Available as part of the Tidelift Subscription.

The maintainers of SockJS and thousands of other packages are working with Tidelift to deliver commercial support and maintenance for the open source dependencies you use to build your applications. Save time, reduce risk, and improve code health, while paying the maintainers of the exact dependencies you use. Learn more.

Summary

SockJS is a browser JavaScript library that provides a WebSocket-like object. SockJS gives you a coherent, cross-browser, Javascript API which creates a low latency, full duplex, cross-domain communication channel between the browser and the web server.

Under the hood SockJS tries to use native WebSockets first. If that fails it can use a variety of browser-specific transport protocols and presents them through WebSocket-like abstractions.

SockJS is intended to work for all modern browsers and in environments which don't support the WebSocket protocol -- for example, behind restrictive corporate proxies.

SockJS-client does require a server counterpart:

Philosophy:

  • The API should follow HTML5 Websockets API as closely as possible.
  • All the transports must support cross domain connections out of the box. It's possible and recommended to host a SockJS server on a different server than your main web site.
  • There is support for at least one streaming protocol for every major browser.
  • Streaming transports should work cross-domain and should support cookies (for cookie-based sticky sessions).
  • Polling transports are used as a fallback for old browsers and hosts behind restrictive proxies.
  • Connection establishment should be fast and lightweight.
  • No Flash inside (no need to open port 843 - which doesn't work through proxies, no need to host 'crossdomain.xml', no need to wait for 3 seconds in order to detect problems)

Subscribe to SockJS mailing list for discussions and support.

SockJS family

Work in progress:

Getting Started

SockJS mimics the WebSockets API, but instead of WebSocket there is a SockJS Javascript object.

First, you need to load the SockJS JavaScript library. For example, you can put that in your HTML head:

<script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>

After the script is loaded you can establish a connection with the SockJS server. Here's a simple example:

 var sock = new SockJS('https://mydomain.com/my_prefix');
 sock.onopen = function() {
     console.log('open');
     sock.send('test');
 };

 sock.onmessage = function(e) {
     console.log('message', e.data);
     sock.close();
 };

 sock.onclose = function() {
     console.log('close');
 };

SockJS-client API

SockJS class

Similar to the 'WebSocket' API, the 'SockJS' constructor takes one or more arguments:

var sockjs = new SockJS(url, _reserved, options);

url may contain a query string, if one is desired.

Where options is a hash which can contain:

  • server (string)

    String to append to url for actual data connection. Defaults to a random 4 digit number.

  • transports (string OR array of strings)

    Sometimes it is useful to disable some fallback transports. This option allows you to supply a list transports that may be used by SockJS. By default all available transports will be used.

  • sessionId (number OR function)

    Both client and server use session identifiers to distinguish connections. If you specify this option as a number, SockJS will use its random string generator function to generate session ids that are N-character long (where N corresponds to the number specified by sessionId). When you specify this option as a function, the function must return a randomly generated string. Every time SockJS needs to generate a session id it will call this function and use the returned string directly. If you don't specify this option, the default is to use the default random string generator to generate 8-character long session ids.

  • timeout (number)

    Specify a minimum timeout in milliseconds to use for the transport connections. By default this is dynamically calculated based on the measured RTT and the number of expected round trips. This setting will establish a minimum, but if the calculated timeout is higher, that will be used.

Although the 'SockJS' object tries to emulate the 'WebSocket' behaviour, it's impossible to support all of its features. An important SockJS limitation is the fact that you're not allowed to open more than one SockJS connection to a single domain at a time. This limitation is caused by an in-browser limit of outgoing connections - usually browsers don't allow opening more than two outgoing connections to a single domain. A single SockJS session requires those two connections - one for downloading data, the other for sending messages. Opening a second SockJS session at the same time would most likely block, and can result in both sessions timing out.

Opening more than one SockJS connection at a time is generally a bad practice. If you absolutely must do it, you can use multiple subdomains, using a different subdomain for every SockJS connection.

Supported transports, by browser (html served from http:// or https://)

BrowserWebsocketsStreamingPolling
IE 6, 7nonojsonp-polling
IE 8, 9 (cookies=no)noxdr-streaming †xdr-polling †
IE 8, 9 (cookies=yes)noiframe-htmlfileiframe-xhr-polling
IE 10rfc6455xhr-streamingxhr-polling
Chrome 6-13hixie-76xhr-streamingxhr-polling
Chrome 14+hybi-10 / rfc6455xhr-streamingxhr-polling
Firefox <10no ‡xhr-streamingxhr-polling
Firefox 10+hybi-10 / rfc6455xhr-streamingxhr-polling
Safari 5.xhixie-76xhr-streamingxhr-polling
Safari 6+rfc6455xhr-streamingxhr-polling
Opera 10.70+no ‡iframe-eventsourceiframe-xhr-polling
Opera 12.10+rfc6455xhr-streamingxhr-polling
Konquerornonojsonp-polling

  • †: IE 8+ supports [XDomainRequest]1, which is essentially a modified AJAX/XHR that can do requests across domains. But unfortunately it doesn't send any cookies, which makes it inappropriate for deployments when the load balancer uses JSESSIONID cookie to do sticky sessions.

  • ‡: Firefox 4.0 and Opera 11.00 and shipped with disabled Websockets "hixie-76". They can still be enabled by manually changing a browser setting.

Supported transports, by browser (html served from file://)

Sometimes you may want to serve your html from "file://" address - for development or if you're using PhoneGap or similar technologies. But due to the Cross Origin Policy files served from "file://" have no Origin, and that means some of SockJS transports won't work. For this reason the SockJS transport table is different than usually, major differences are:

BrowserWebsocketsStreamingPolling
IE 8, 9same as aboveiframe-htmlfileiframe-xhr-polling
Othersame as aboveiframe-eventsourceiframe-xhr-polling

Supported transports, by name

TransportReferences
websocket (rfc6455)[rfc 6455]2
websocket (hixie-76)[draft-hixie-thewebsocketprotocol-76]3
websocket (hybi-10)[draft-ietf-hybi-thewebsocketprotocol-10]4
xhr-streamingTransport using [Cross domain XHR]5 [streaming]6 capability (readyState=3).
xdr-streamingTransport using [XDomainRequest]1 [streaming]6 capability (readyState=3).
eventsource[EventSource/Server-sent events]7.
iframe-eventsource[EventSource/Server-sent events]7 used from an [iframe via postMessage]8.
htmlfile[HtmlFile]9.
iframe-htmlfile[HtmlFile]9 used from an [iframe via postMessage]8.
xhr-pollingLong-polling using [cross domain XHR]5.
xdr-pollingLong-polling using [XDomainRequest]1.
iframe-xhr-pollingLong-polling using normal AJAX from an [iframe via postMessage]8.
jsonp-pollingSlow and old fashioned [JSONP polling]10. This transport will show "busy indicator" (aka: "spinning wheel") when sending data.

Connecting to SockJS without the client

Although the main point of SockJS is to enable browser-to-server connectivity, it is possible to connect to SockJS from an external application. Any SockJS server complying with 0.3 protocol does support a raw WebSocket url. The raw WebSocket url for the test server looks like:

  • ws://localhost:8081/echo/websocket

You can connect any WebSocket RFC 6455 compliant WebSocket client to this url. This can be a command line client, external application, third party code or even a browser (though I don't know why you would want to do so).

Deployment

You should use a version of sockjs-client that supports the protocol used by your server. For example:

<script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>

For server-side deployment tricks, especially about load balancing and session stickiness, take a look at the SockJS-node readme.

Development and testing

SockJS-client needs node.js for running a test server and JavaScript minification. If you want to work on SockJS-client source code, checkout the git repo and follow these steps:

cd sockjs-client
npm install

To generate JavaScript, run:

gulp browserify

To generate minified JavaScript, run:

gulp browserify:min

Both commands output into the build directory.

Testing

Automated testing provided by:

Once you've compiled the SockJS-client you may want to check if your changes pass all the tests.

npm run test:browser_local

This will start karma and a test support server.

Browser Quirks

There are various browser quirks which we don't intend to address:

  • Pressing ESC in Firefox, before Firefox 20, closes the SockJS connection. For a workaround and discussion see #18.
  • jsonp-polling transport will show a "spinning wheel" (aka. "busy indicator") when sending data.
  • You can't open more than one SockJS connection to one domain at the same time due to the browser's limit of concurrent connections (this limit is not counting native WebSocket connections).
  • Although SockJS is trying to escape any strange Unicode characters (even invalid ones - like surrogates \xD800-\xDBFF or \xFFFE and \xFFFF) it's advisable to use only valid characters. Using invalid characters is a bit slower, and may not work with SockJS servers that have proper Unicode support.
  • Having a global function called onmessage or such is probably a bad idea, as it could be called by the built-in postMessage API.
  • From SockJS' point of view there is nothing special about SSL/HTTPS. Connecting between unencrypted and encrypted sites should work just fine.
  • Although SockJS does its best to support both prefix and cookie based sticky sessions, the latter may not work well cross-domain with browsers that don't accept third-party cookies by default (Safari). In order to get around this make sure you're connecting to SockJS from the same parent domain as the main site. For example 'sockjs.a.com' is able to set cookies if you're connecting from 'www.a.com' or 'a.com'.
  • Trying to connect from secure "https://" to insecure "http://" is not a good idea. The other way around should be fine.
  • Long polling is known to cause problems on Heroku, but a workaround for SockJS is available.
  • SockJS websocket transport is more stable over SSL. If you're a serious SockJS user then consider using SSL (more info).

Footnotes

  1. https://blogs.msdn.microsoft.com/ieinternals/2010/05/13/xdomainrequest-restrictions-limitations-and-workarounds/ ↩ ↩2 ↩3

  2. https://www.rfc-editor.org/rfc/rfc6455.txt ↩

  3. https://tools.ietf.org/html/draft-hixie-thewebsocketprotocol-76 ↩

  4. https://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol-10 ↩

  5. https://secure.wikimedia.org/wikipedia/en/wiki/XMLHttpRequest#Cross-domain_requests ↩ ↩2

  6. http://www.debugtheweb.com/test/teststreaming.aspx ↩ ↩2

  7. https://html.spec.whatwg.org/multipage/comms.html#server-sent-events ↩ ↩2

  8. https://developer.mozilla.org/en/DOM/window.postMessage ↩ ↩2 ↩3

  9. http://cometdaily.com/2007/11/18/ie-activexhtmlfile-transport-part-ii/ ↩ ↩2

  10. https://secure.wikimedia.org/wikipedia/en/wiki/JSONP ↩

NPM DownloadsLast 30 Days