I'm trying to integrate Socket.io
into a docker-compose stack with a frontend (Angular
Nginx
) and a backend (Node.JS
Express
). The goal of this instance is to broadcast in real-time messages between instances.
But that doesn't works when I'm deploying it using Nginx
, and I don't received any errors messages. The only log I received is from the Frontend and it's a code 200
on "localhost".
src-frontend-1 | 172.27.0.1 - - [26/Apr/2022:08:18:05 0000] "POST /socket.io/?EIO=4&transport=polling&t=O1aylEl&sid=KfZQUO36iFaqoKlWAAAA HTTP/1.1" 200 2 "http://localhost/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36" "-"
Note that code works when I run on my dev computer using ng serve
and npm run dev
Here my backend:
const PORT = process.env.PORT || 8080;
const app = express();
const httpServer = new createServer(app);
const io = new Server(httpServer, {
cors: {
origin: {
origin: "http://localhost:8080",
},
allowedHeaders: ["socket.io"],
credentials: true,
},
});
io.on("connection", (socket) => {
console.log("new socket connected");
socket.on("process", (data) => {
console.log(`New data received : ${data}`);
newDataSocket = data.isOperation; //Status of instances
console.log("result data socket :", newDataSocket);
socket.broadcast.emit("processChanged", data);
}); // listen to the event
socket.on("error", function (err) {
console.log("Socket.IO Error");
console.log(err); // this is changed from your code in last comment
});
});
httpServer.listen(6379, () => {
console.log(`[app with socket.io] : Listening on PORT 6379`);
});
Frontend core.module.ts for the configuration
import { SocketIoModule, SocketIoConfig } from 'ngx-socket-io';
const config: SocketIoConfig = { url: /socket.io/, options: {} };
Frontend service Socket
export class SocketIoService {
constructor(private socket: Socket) {}
sendMessage(msg: object) {
console.log('msg sended from front===>', msg);
this.socket.emit('process', msg);
}
getMessage() {
return this.socket.fromEvent<any>('processChanged')
}
}
Dockerfile backend
FROM node:14-alpine
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
# Bundle app source
COPY . .
EXPOSE 8080 6379
CMD [ "node", "app.js" ]
Nginx configuration
location /socket.io/ {
proxy_pass http://api:6379;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_http_version 1.1;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
And the docker-compose file
version: '3.4'
services:
api:
build:
context: './backend'
ports:
- 8080:8080
frontend:
build:
context: './frontend'
ports:
- 80:80
depends_on:
- api
links:
- api
CodePudding user response:
UPDATE
So, some misunderstood from my side and some miss in the documentation.
- The
ngx-socket-io
library doesn't support url string if there nothttp
front of it. So I need to add the domain. I used/api
withouthttp
for my REST calls and it works before but not with this library
import { SocketIoModule, SocketIoConfig } from 'ngx-socket-io';
const config: SocketIoConfig = { url: 'http://localhost/socket.io', options: {} };
- If no
path
in options,ngx-socket-io
add/socket.io
by default.
import { SocketIoModule, SocketIoConfig } from 'ngx-socket-io';
const config: SocketIoConfig = { url: 'http://localhost', options: {} };
- I also add
path
in the backend options, not sure it was very useful
const io = new Server(httpServer, {
path: "/socket.io",
cors: {
origin: [CORS_POLICY],
methods: ["GET", "POST"]
}
});
And it's works. My requests were 200 but in the network console of Chrome I missed the "wrong namespace" error, that help me to find the cause.