Manage RealTime Socket Connection Between Client/Server in CAPSocket package manager:

Last Testing With Nuxt Version : 3.13.0

Sponsors

Background

In the past, for two-way communication between the client and the server in each project and each version in the frontend, we needed to write a large amount of code to do this communication. This process was time-consuming and also created problems for developers with different experiences. It was decided to prepare a complete package of all the company's requirements and provide it to the company's developers.

Getting Started

• Installation
• ExternalConfigFile
• Setting

Installation

Installing Package To Your Project With :

• pnpm Package Manager :

 pnpm install cap-socket latest

• OR npm Package Manager :

 npm install cap-socket latest

• OR yarn Package Manager :

 yarn add cap-socket latest

Then, add cap-socket to the modules section of your Nuxt configuration:

export default defineNuxtConfig({
  modules: ['cap-socket']
})

ExternalConfigFile

You can save the settings related to the project in a separate file outside Nuxt.Config.ts file. For this, create a file called cap_socket_config.json in the public folder and enter the following values :

{
    "socket": {
        "type": "signalr",
            "url": "http://192.168.100.9:3001/playgroundHub",
            "debug": true,
            "reconnectAttempts": 10,
            "reconnectDelay": 2,
            "reconnectDelayMax": 15,
            "timeout": 20
    }
}

The advantage of this work is that when the output from the project is prepared and placed on the server, you can change the settings related to the connection to the BackEnd without the need to prepare a new output.

Setting

| Key | Type | Default | Description | |---------------------------------------|-----------|----------|-------------------------------------------------------------------------------------------------------------------------------| | type | string | signalr | Specifies the type of communication package (SignalR or SocketIO) | | url | string | `` | Address of the server managing socket connections (for SignalR along with the HUB address) | | debug | boolean | true | Debugging | | reconnectAttempts | number | 10 | Number of attempts to reconnect to the socket server | | reconnectDelay | number | 2 | Number of attempts to reconnect to the socket server | | reconnectDelayMax | number | 15 | Reconnect delay (in seconds) | | timeout | number | 20 | Wait time to establish a connection |

Thank You

Thanks to all colleagues of CAP Company

Author : Ahmad Ghanavati