docker-compose堆疊上的Socket.io(Node Angular)-有解無憂

我正在嘗試使用前端 ( ) 和后端 ( ) 集成Socket.io到 docker-compose 堆疊中。此實體的目標是在實體之間實時廣播訊息。但是當我使用部署它時這不起作用，并且我沒有收到任何錯誤訊息。我收到的唯一日志來自前端，它是“localhost”上的代碼。AngularNginxNode.JS ExpressNginx200

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" "-"

請注意，當我在我的開發計算機上運行時，代碼有效ng serve，npm run dev
這里是我的后端：

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`);
});

用于配置的前端 core.module.ts

import { SocketIoModule, SocketIoConfig } from 'ngx-socket-io';
const config: SocketIoConfig = { url: /socket.io/, options: {} };

前端服務套接字

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 后端

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 配置

    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;
    }

和 docker-compose 檔案

version: '3.4'

services:
  api:
    build:
      context: './backend'
    ports:
      - 8080:8080

  frontend:
    build:
      context: './frontend'
    ports:
      - 80:80
    depends_on:
      - api
    links:
      - api

uj5u.com熱心網友回復：

更新

所以，有些人誤解了我的意思，有些人在檔案中遺漏了一些。

如果沒有前面的url 字串，ngx-socket-io庫不支持它。http所以我需要添加域。我在我的 REST 呼叫中使用/apiwithout ，它以前可以使用，但不適用于這個庫http

import { SocketIoModule, SocketIoConfig } from 'ngx-socket-io';
const config: SocketIoConfig = { url: 'http://localhost/socket.io', options: {} };

如果path選項中沒有，則默認ngx-socket-io添加/socket.io。

import { SocketIoModule, SocketIoConfig } from 'ngx-socket-io';
const config: SocketIoConfig = { url: 'http://localhost', options: {} };

我還添加path了后端選項，不確定它是否很有用

const io = new Server(httpServer, {
  path: "/socket.io",
  cors: {
    origin: [CORS_POLICY],
    methods: ["GET", "POST"]
  }
});

它的作品。我的請求是 200，但在 Chrome 的網路控制臺中，我錯過了“錯誤的命名空間”錯誤，這有助于我找到原因。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/469067.html

標籤：节点.js 有角度的码头工人 nginx 套接字.io

上一篇：AzureWeb應用服務是否需要像nginx這樣的反向代理？

下一篇：如何告訴NGINX不要proxy_pass某些URI？