I have organized my system using microservices architecture, with separate services for client interactions, orders, payments, and more. Each of these services runs on its own express server.
Now, I am looking to integrate real-time feedback functionality using socket.io. Currently, I am utilizing Kubernetes with Nginx to run these services within containers using Docker and Minikube.
My main query is regarding how to establish connections between the client service and other servers such as orders and payments in order to listen to events from various services.
In the order service section, I have set up a server in the following manner:
// * importing necessary modules for socketIO
import express from 'express';
import http from 'http';
import socketIO from 'socket.io';
// * declaring io globally
declare global {
namespace NodeJS {
interface Global {
io: socketIO.Server
}
}
}
// * creating an express app
const app = express();
// * creating a globally defined socket
const server = http.createServer(app);
global.io = new socketIO.Server(server);
// * handling connection with the server
global.io.on('connection', socket => {
console.log(`New ${socket.client} client connected`);
socket.emit('conn', 'connected');
// * Handling client disconnection
socket.on('disconnect', reason => {
console.log(reason);
})
});
I require assistance in establishing connections between these services and effectively integrating socketIO plugin.
On the client side, I am working with next.js but facing challenges in connecting with the backend.
Note: My setup includes Nginx service in Kubernetes with the following configuration file:apiVersion: extensions/v1beta1
kind: Ingress
metadata:
name: ingress-service
annotations:
kubernetes.io/ingress.class: nginx
nginx.ingress.kubernetes.io/use-regex: 'true'
spec:
rules:
- host: test.dev
http:
paths:
- path: /api/users/?(.*)
backend:
serviceName: auth-srv
servicePort: 3000
- path: /api/orders/?(.*)
backend:
serviceName: orders-srv
servicePort: 3000
- path: /api/payments/?(.*)
backend:
serviceName: payments-srv
servicePort: 3000
- path: /?(.*)
backend:
serviceName: client-srv
servicePort: 3000
Below is the code snippet for the frontend client service where I am trying to establish a connection:
import Link from 'next/link'
import { useEffect, useState } from 'react';
import { io } from "socket.io-client";
function useSocket(url) {
const [socket, setSocket] = useState(null)
useEffect(() => {
const socketIo = io(url)
setSocket(socketIo)
function cleanup() {
socketIo.disconnect()
}
return cleanup
// this effect should only run once and not on every re-render,
// thus passing an empty array
}, [])
return socket
}
const Home = ({ events, reqErr }) => {
// Establishing connection to orders service
const socket = useSocket('/api/orders');
// * Error Handling
if (events === undefined || reqErr) {
return (
<div className="handle-error">
<center>
<h1 style={{color: 'red', margin: '20rem auto'}}> Can't Load page <br /> Error {reqErr.message}</h1>
</center>
</div>
);
}
useEffect(() => {
if (socket) {
socket.on('conn', data => {
console.log(data);
})
}
}, [socket]);
// * Rendering the page
return (
<div>
Rendered
</div>
)
}
Home.getInitialProps = async (context, client, currentUser) => {
// Sending request to order service
};
export default Home;
I am seeking guidance or suggestions on how to achieve this integration successfully.