Javascript 在SocketIO中与Angular和NodeJS聊天它仅在本地主机中实时工作，而不在不同的pc中工作

我用SocketIO实现了Angular中的实时聊天。 聊天室可以实时运行，但只能在一台机器或PC上运行。 如果我尝试与另一个用户登录另一台电脑，并尝试发送聊天信息，则需要重新加载组件以查看新消息

server.js或后端它在两个设备中启动，可能有问题，但我不确定

socketIO it的配置使其不会采用默认端口

这是我在后端的代码

const socketIO = require('socket.io');
const app = express();

const server = http.Server(app);

const io = socketIO(server, {
  cors: {
  origin: "*",
  credentials: true
  }
});
app.set('io', io);

const PORT = 5000;

server.listen(PORT);

这是后端中的模型

const mongoose = require("mongoose");
const Schema = mongoose.Schema;

const schema = new Schema({
    emitterId: {type: String, required: true},
    emitter: {type:String, required: true},
    content: {
        type : { type : String },
        value: { type : String },
    },
    timestamp: { type : Date, default: Date.now }
});

schema.set("toJSON", {virtuals: true});
module.exports = mongoose.model("Message", schema);

这是后端中的路由

const MessagesController = require("../controllers/messageController");

const routes = express.Router();

/** Messages */
routes.post("/createMessage", MessagesController.createNewMessage);
routes.get("/messages", MessagesController.findAllMessages);
routes.post("/getMessages", MessagesController.getMessages);

这就是服务

const Message = require("../models/message");

async function createMessage(payload) {
    const newMessage = new Message(payload);
    await newMessage.save();
}
async function findMessages() {
    return await Message.find();
}

async function getMessages({userId, toUserId}) {
    const data = {
        '$or' : [
            { '$and': [
                    {
                        'emitter': userId
                    },
                    {
                        'emitterId': toUserId
                    }
                ]
            },
            {
                '$and': [
                    {
                        'emitter': toUserId
                    }, {
                        'emitterId': userId
                    }
                ]
            },
        ]
    };
    return await Message.find(data);
}

module.exports = {
    createMessage,
    findMessages,
    getMessages
}

这是我的控制器

const messageService = require("../service/message.service");


function createNewMessage(req, res, next) {
    const io = req.app.get("io");
    messageService.createMessage(req.body)
        .then(() => {
            res.status(200).json();
            io.emit("newMessage", req.body);
        })
        .catch(err => next(err));
}
function getMessages(req, res, next) {
    let userId = req.body.emitterId;
    let toUserId = req.body.emitter;
         messageService.getMessages({
            userId: userId,
            toUserId: toUserId
        }).then(msg => res.json(msg))
             .catch(err => next(err));
}
module.exports = {
    createNewMessage,
    findAllMessages,
    getMessages
}

这是前端的部分

  <div class="chat-message">
    <div class="message-list">
        <ul #messageThread class="message-thread" *ngIf="messages.length !== 0">
          <li *ngFor="let message of messages; trackBy: trackThings" [class.align-left]="!alignMessage(message.emitterId)" [class.align-right]="alignMessage(message.emitterId)" [tooltip]="message.timestamp | date: 'MMM d, y, h:mm:ss a'">
            {{ message.content.value}}
          </li>
        </ul>

    </div>


 constructor(
    public msgHelperService: MessageHelperService,
    public authService: AuthService,
    public cd: ChangeDetectorRef) {
    this.socket = io(environment.backend);

  }

  ngOnInit(): void {
      this.getMessages();
      this.cd.detectChanges();
      this.scrollMessageContainer();
      this.socket.on("newMessage", (payload) => {
      this.getMessages();
    })
  }
 sendMessage(friend) {
    const msgObj = {
      emitterId: friend.uniqueId,
      emitter: this.authService.userID,
      content: {
        value: this.message
      },
      timestamp: new Date(),
    }
    this.msgHelperService.createMessage(msgObj).pipe().subscribe();
    this.message = "";
    this.scrollMessageContainer();
    setTimeout(()=>{
      this.socket.on("newMessage", () =>{
        this.getMessages();
      });
    }, 500);
    this.cd.detectChanges();
  }



getMessages() {
    this.socket.on("newMessage", () => {
      this.msgHelperService.getMessages(this.authService.userID, this.selectedUser).subscribe((response: Messages[]) => {
        this.messages = response;
        this.scrollMessageContainer();
      });
    })
    this.msgHelperService.getMessages(this.authService.userID, this.selectedUser).subscribe((response: Messages[]) => {
      this.messages = response;
      this.scrollMessageContainer();
    })
  }

  alignMessage(userId: string): boolean {
    return this.authService.userID !== userId;
  }

---

我试着理解它，但我不能。根据我的经验，环境文件中的后端设置是否正确？通常应该指向您的后端（这意味着无法从所有客户端访问到一台机器），但如果您将其设置为“localhost”，则显然每个客户端都会尝试在其自身上进行连接，而这将不起作用（除了每个客户端还运行一个后端实例）。为了验证，您是否尝试过检查浏览器中的开发控制台以及浏览器开发工具的websocket选项卡？

@Injectable({
  providedIn: "root"
})

export class MessageHelperService {

  constructor(private messageService: MessagesService) {
  }

  createMessage(message): Observable<Messages> {
    return new Observable(observer => {
      this.messageService.createRequest(message).subscribe(() => {
        observer.next();
      })
    })
  }

  getMessages(toUserId, authId): Observable<any> {
      return new Observable<any>(observer => {
        this.messageService.getMessages({emitter: authId, emitterId: toUserId}).subscribe(result => {
          observer.next(result);
        })
      })
  }
  getYourMessages(authId): Observable<any> {
    return new Observable<any>(observer => {
      this.messageService.getYourMessages({emitter: authId}).subscribe(result => {
        observer.next(result);
      })
    })
  }
}

@Injectable({
  providedIn: "root"
})
export class MessagesService {
  public baseUrl = environment.backend;
  private httpOptions = {
    headers: new HttpHeaders({
      "Content-Type": "application/json",
    })
  };
  constructor(private http: HttpClient) { }

  createRequest(newRequest: Messages) {
    return this.http.post<Messages>(`${this.baseUrl}/createMessage`, newRequest)
      .pipe(map(res => {
        return res;
      }))
  }

  getAllMsg() {
    return this.http.get<any[]>(`${this.baseUrl}/messages`);
  }

  getMessages(params: Messages): Observable<MessagesResponse> {
    return this.http.post(`${this.baseUrl}/getMessages`, JSON.stringify(params), this.httpOptions).pipe(
      map((response: MessagesResponse) => {
        return response;
      },
        (err) => {
        throw err;
        })
    )
  }
  getYourMessages(params: Messages): Observable<MessagesResponse> {
    return this.http.post(`${this.baseUrl}/getYourMessages`, JSON.stringify(params), this.httpOptions).pipe(
      map((response: MessagesResponse) => {
          return response;
        },
        (err) => {
          throw err;
        })
    )
  }
}

export const environment = {
  production: false,
  backend: "http://localhost:5000"
};