如何在Angular中使用socket.io-client将发送者与接收者消息显示在不同区域

看起来你遇到的核心问题是socketID没有正确初始化传递，再加上HTML里的条件和样式对应错了，导致消息没法区分显示。我帮你一步步修复：

问题1：ChatService里的socketID没赋值 #

你在ChatService的constructor里收到了myId事件，但只是打印了id，没有把它赋值给this.socketID，导致发送消息时senderId是空的，前端自然没法比较。同时，其实socket连接后本身就有id属性，直接用this.socket.id更可靠，不用等myId事件。

修改ChatService的代码：

constructor() {
  this.socket = io('http://localhost:3000');
  // 可以保留myId事件，但同时赋值给socketID
  this.socket.on('myId', (id) => {
    console.log('from service', id);
    this.socketID = id;
  });
}

public sendMessage(message: any) {
  // 直接用socket.id作为senderId，确保不会为空
  this.socket.emit('sendMessage', { message: message, senderId: this.socket.id });
  console.log('Sender ID = ', this.socket.id);
}

问题2：组件里的socketId没有正确获取 #

你的组件在ngOnInit里直接拿this.chatService.socketID，但这个值可能还没被myId事件赋值（因为socket连接是异步的）。可以改成监听socket的连接事件或者myId事件来获取当前用户的id：

修改组件的ngOnInit：

ngOnInit(){
  // 监听socket连接成功事件，获取当前用户id
  this.chatService.socket.on('connect', () => {
    this.socketId = this.chatService.socket.id;
    console.log('this.socketID', this.socketId);
  });

  // 或者监听myId事件，二选一即可
  // this.chatService.socket.on('myId', (id) => {
  //   this.socketId = id;
  // });

  this.chatService.getNewMessage().subscribe((message: MessageModel) => {
    console.log('Sockit ID = ', message.senderId);
    this.messageList.push(message);
  });
}

问题3：HTML里的条件和样式搞反了 #

你的CSS里，my-chat是右对齐（自己的消息应该显示在右边），client-chat是左对齐（对方的消息），但HTML里的判断逻辑写反了：当是自己发的消息（socketId === message.senderId），你用了client-chat，导致自己的消息跑到左边去了。

修改HTML：

<div class="chats" *ngFor="let message of messageList"> 
  <div *ngIf="message"> 
    <!-- 自己发的消息用my-chat（右对齐） -->
    <div *ngIf="socketId === message.senderId" class="my-chat"> 
      {{message.message}} 
    </div> 
    <!-- 对方发的消息用client-chat（左对齐） -->
    <div *ngIf="socketId !== message.senderId" class="client-chat"> 
      {{message.message}} 
    </div> 
  </div> 
</div>

额外优化：确保消息对象的完整性 #

服务器端的代码其实没问题，不过可以明确把senderId一起广播，避免遗漏：

socket.on('sendMessage', (messageData) => { 
  console.log(messageData.senderId); 
  io.emit('recieveMessage', messageData); // 直接转发完整的消息对象
});

这样修改后，你应该就能看到自己的消息显示在右侧，对方的消息显示在左侧了。

内容的提问来源于stack exchange，提问作者Amir Shahzad