WebSocket: How to automatically reconnect after it dies

Posted on

WebSocket: How to automatically reconnect after it dies – Even if we have a good project plan and a logical concept, we will spend the majority of our time correcting errors abaout javascript and websocket. Furthermore, our application can run without obvious errors with JavaScript, we must use various ways to ensure that everything is operating properly. In general, there are two types of errors that you’ll encounter while doing something wrong in code: Syntax Errors and Logic Errors. To make bug fixing easier, every JavaScript error is captured with a full stack trace and the specific line of source code marked. To assist you in resolving the JavaScript error, look at the discuss below to fix problem about WebSocket: How to automatically reconnect after it dies.

Problem :

var ws = new WebSocket('ws://localhost:8080');
ws.onopen = function () {
      .... some message the I must send when I connect ....


ws.onmessage = function (e) {
  console.log('Got a message')

ws.onclose = function(e) {  
  console.log('socket closed try again'); 


ws.onerror = function(err) {

When I first connect to the socket, I must first send a message to the server to authenticate myself and subscribe to channels.

The problem I have is that sometimes the socket server is unreliable and that triggers the onerror and onclose events of the 'ws' object.

Question: What is a good design pattern that would allow me, whenever the socket closes or encounters an error, wait for 10 seconds and then reconnect to the socket server (and resend the initial message to the server)

Solution :

Here is what I ended up with. It works for my purposes.

function connect() {
  var ws = new WebSocket('ws://localhost:8080');
  ws.onopen = function() {
    // subscribe to some channels
        //.... some message the I must send when I connect ....

  ws.onmessage = function(e) {
    console.log('Message:', e.data);

  ws.onclose = function(e) {
    console.log('Socket is closed. Reconnect will be attempted in 1 second.', e.reason);
    setTimeout(function() {
    }, 1000);

  ws.onerror = function(err) {
    console.error('Socket encountered error: ', err.message, 'Closing socket');


This worked for me with setInterval, because client connection can be lost.

ngOnInit(): void {
    if (window.location.protocol.includes('https')) {
        this.protocol = 'wss';


listenChanges(): void {
    this.socket = new WebSocket(`${this.protocol}://${window.location.host}/v1.0/your/url`);

    this.socket.onmessage = (event): void => {
        // your subscription stuff

    this.socket.onerror = (): void => {

    this.socket.onopen = (): void => {

        this.socket.onclose = (): void => {
            this.timerId = setInterval(() => {
            }, 10000);

Don’t forget to call clearInterval when the socket has been opened.

This isn’t explicitly a react question but here is a react style answer:

TLDR: You can use setInterval to periodically check the websocket connection status and try to re-connect if the connection is closed. https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/readyState

class TestComponent extends React.Component {
  constructor(props) {
    this.state = {};

    this.connect = this.connect.bind(this);

  componentDidMount() {
    this.interval = setInterval(this.connect, 1000);

  componentWillUnmount() {
    if (this.ws) this.ws.close();
    if (this.interval) clearInterval(this.interval);

  connect() {
    // https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/readyState
    if (this.ws === undefined || (this.ws && this.ws.readyState === 3)) {
      this.ws = new WebSocket(`ws://localhost:8080`);

      this.ws.onmessage = (e) => {

  render() {
    return <div>Hey!</div>;

I found that this package https://github.com/pladaria/reconnecting-websocket can solve the reconnection issues for Websocket connections. And it has the list of configurable options, one of them is reconnectionDelayGrowFactor which determines how fast the reconnection delay grows.

using async-await if socket closed or any error occurred on the server the client will try to connect automatically every 5 sec forever
have a look to my answer

UPDATED answer:

At last, (if you are not using java) I found you’d better implement your own “ping/pong” strategy. (if you are using java, please take a look at ping/pong “action type”, I don’t remember very clear… )

  1. client sent “ping” to server every 5 seconds.
  2. server should echo a “pong” to the client once it receive “ping”.
  3. client should reconnect server if doesn’t receive “pong” in 5 seconds.

Don’t rely on any third party libs.

WARNING: DO NOT use these tools: (reason: they are not reliable and not stable and works in a very limited way. )

  1. check if the network is available: https://github.com/hubspot/offline
  2. to re-connect: https://github.com/joewalnes/reconnecting-websocket

You can use a small library if you want – ReconnectingWebSocket

Add reconnecting-websocket.js in your script tag and

It is API compatible, so when you have:

var ws = new WebSocket('ws://....');

you can replace with:

var ws = new ReconnectingWebSocket('ws://....');

Try this:

const observable = Observable.create(
  (obs: Observer<MessageEvent>) => {
    this.ws.onmessage = obs.next.bind(obs);
    this.ws.onerror = obs.error.bind(obs);
    // this.ws.onclose = obs.complete.bind(obs);
    this.ws.onclose = function () {
    return this.ws.close.bind(this.ws);

const observer = {
  next: (data: Object) => {
    if (this.ws.readyState === WebSocket.OPEN) {

and component

getDatas() {
let url = environment.apiwebsocket
  .subscribe(evt => {
    let jsonObj = JSON.parse(evt.data)

Leave a Reply

Your email address will not be published. Required fields are marked *