JavaScript Singleton to connect to WebSocket (originally for React project)

webSocket.js

// Thank you Ranatchai Chernbamrung for sample socketIO singleton pattern
// This code is originally for my React project, but should work with any ES6 project that support `import` statement

// How it works
// 1. Create webSocket.js to establish the connection and retrieve the connection
// 2. In main file, import webSocket.js to establish the connection
// 3. In other component files, import webSocket.js to retrieve the connection

// webSocket.js
let client

export const initws = (mesg) => {
  client = new WebSocket('ws://localhost:4237')
  return client
}

export const getws = () => {
  return client
}

// App.js
import { initws } from './webSocket'
let ws = initws('Hi')
ws.send(...)
ws.onmessage = ev => { console.log(ev.data) }

// SomeComponent.js
import { getws } from './../webSocket'
let ws = getws()

Did this work for you?

Thanks a lot.. it worked

is there any way to manage socket disconnect status and try to reconnect ?

Did this work for you?

Yes! it works for me :)

is there any way to manage socket disconnect status and try to reconnect ?

In case of disconnection, you could add more code in getws() function to test if it's disconnected. If it is, then connect again before returning value.

I have changed code to this but still no success

`export const getws = () => {
if (client.readyState == 1) {
return client;
} else {
if (client.readyState == 3) {
client = new WebSocket(APIs.WS_BASE_URL)
return client;
}

}`
can you please help me out in this?

Check if your code is actually calling the getws() function when the connection is needed. And also check if .readyState is the root cause of your disconnection issue. There could be other issue which caused the connection to not work.

P.S. Please try to use "else if" to make your code cleaner

I have used this library for re-connection sockets when server disconnected, but what i want is when server is disconnected and reconnected then i want to send the previous request in order to get the current screen response(last ws.send function response), if you find any thing regarding this please let me know.

Websocket Reconnect

Thanks for sharing this!
For your case of submitting the previous request, you might be able to use try { } catch { } blocks to record the failed request so that you can send them again.