Socio is an advanced framework designed for WebSocket Real-Time Communication (RTC) APIs, facilitating both frontend and backend reactivity. With Socio, developers can seamlessly integrate SQL queries directly into frontend code, ensuring automatic updates across all connected clients whenever changes occur in the underlying database. This project allows the creation of generic JavaScript variables on the server, which can be in real-time synchronization with all clients through a feature known as "Server Props."

Socio is designed to be framework-agnostic, compatible across various build tools, server libraries, and SQL databases. It requires Node.js version 16 LTS or later and offers compiled JavaScript outputs along with TypeScript definition files.

How It Works

Socio operates as an intermediary between your database and client browsers. The SocioServer sets up a WebSocket server on the backend, which can easily connect to any database. On the client side, the SocioClient communicates with the server using various Socio protocols and methods, such as SocioClient.Query() and SocioClient.Subscribe(), which leverage SQL strings for data retrieval. The system enables duplex real-time connections, allowing the server to push data to clients as needed, thus supporting comprehensive functionalities, including file transfers.

Ensuring Data Safety

To safeguard against SQL injections, client-side JavaScript files in Socio only contain encrypted versions of the SQL queries. The AES-256-GCM encryption algorithm ensures confidentiality, integrity, and authenticity, while dynamic data should still be sanitized on the server-side. Additionally, queries can include optional markers for authentication and permission checks, managed by the Socio Server. The SocioSecurity class aids in encryption on the server side, while its accompanying Vite plugin automates many processes.

Example Code

Backend Implementation

import { SocioServer } from 'socio/dist/core-server';
import { SocioSecurity } from 'socio/dist/secure';

async function QueryWrap(client: SocioSession, id: id, sql: string, params: any): Promise<object> {
    // Execute your SQL on the database and return the resultant data.
}

const socsec = new SocioSecurity({ secure_private_key: '...', logging: { verbose: true } });
const socserv = new SocioServer({ port: 3000 }, { db: { Query: QueryWrap }, socio_security: socsec, logging: { verbose: true } });

Frontend Implementation

import { SocioClient } from 'socio/dist/core-client';
import { socio } from 'socio/dist/utils';

const sc = new SocioClient({ url: 'ws://localhost:3000', logging: { verbose: true } });
await sc.ready();
const sub_id = sc.Subscribe({ sql: socio`SELECT * FROM Users;` }, (res: object) => {...});
await sc.Query(socio`INSERT INTO Users (name, num) VALUES(:name, :num);`, { name: 'bob', num: 42 });

Scalability and Efficiency

Socio solution is optimized for small to medium-scale applications, with reports suggesting efficient performance for about 100 concurrent users on basic servers. The framework employs @msgpack/msgpack for advanced binary serialization, enhancing network efficiency significantly compared to traditional HTTP approaches.

Additional Features

Socio does not restrict the use of conventional HTTP technologies, allowing it to be integrated within existing HTTP servers like those developed with Express.js. The framework supports secure protocols (WSS:// and HTTPS://), ensuring data remains secure during transmission.

Conclusion

With its user-friendly setup, robust security features, and real-time synchronization capabilities, Socio offers a powerful solution for developers looking to enhance their applications with real-time communication. For more insights, explore the Simple Documentation and interactive demos available within the repository.