时间戳

首页 > 解决方案 > 我如何使用 socket.io-client 在不同的角度显示发送方和接收方消息

node.js - 我如何使用 socket.io-client 在不同的角度显示发送方和接收方消息

问题描述

一切正常，但问题是我想在不同的一侧显示发送者和接收者消息，但我不知道如何实现这一点我也从服务器端获取套接字 ID，但我无法创建逻辑我怎么能区分我的html页面上的发送者和接收者消息请任何人都可以帮助我提前谢谢

这是我的服务器端代码

 io.on('connection', (socket) => {
 console.log('a user connected');
 socket.emit('myId', socket.id);

 socket.on('sendMessage', (message) => {
  const sockitID = socket.id;
  console.log(sockitID);
  io.emit('recieveMessage', message); //`${socket.id.substr(0, 2)} said--${message}`
 });

 socket.on('disconnect', () => {
  console.log('a user disconnected!');
 });
 });

这是我来自 agular 的聊天服务文件

  import { Injectable, OnInit } from '@angular/core';
  import { BehaviorSubject, Observable } from 'rxjs';
  import { io, Socket } from "socket.io-client";
  import { DefaultEventsMap } from 'socket.io-client/build/typed-events';
  import { MessageModel } from './app.component';

  @Injectable({
  providedIn: 'root'
  })
  export class ChatService implements OnInit {
    public message$: BehaviorSubject<MessageModel> = new BehaviorSubject({});
    public socket: Socket<DefaultEventsMap, DefaultEventsMap>;
    public socketID: string = ''
    constructor() {
     this.socket =io('http://localhost:3000');
     this.socket.on('myId', (id)=>{
     console.log('from service',id);
    });

    }
   ngOnInit(): void {

   }
   public sendMessage(message:any) {
     this.socket.emit('sendMessage', {message: message, senderId : this.socketID});
     const senderID = this.socket.id;
     console.log('Sender ID = ' ,senderID);
   }

   public getNewMessage = () => {
    this.socket.on('recieveMessage', (message) =>{
    this.message$.next(message);
    const reciverID = this.socket.id;
    console.log('Receiver ID = ', reciverID)
   });

   return this.message$.asObservable();
   };
   }

这是我的角度打字稿文件

   import { Component } from '@angular/core';
   import { ChatService } from './chat.service';

   export interface MessageModel{
   message?: string;
   senderId?:string; 
  }

  @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
  })
  export class AppComponent {
   public socketId: string = '';
   constructor(private chatService: ChatService){}

   newMessage!: string;
   messageList: MessageModel[] = [];

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

这是我用于显示消息的 html 文件

   <div class="chats" *ngFor="let message of messageList">
    <div *ngIf="message">
      <div   *ngIf="socketId === message.senderId" class="client-chat"> 
        {{message.message}}
      </div>
      <div    *ngIf="socketId !== message.senderId"  class="my-chat"> 
        {{message.message}}
      </div>
    </div>
  </div>

这是我的 css 样式，通过样式将发送者消息与接收者分开

 .client-chat{
   width: 60%;
   word-wrap: break-word;
   background-color: #4f5d73c7;
   padding: 7px 10px;
   border-radius: 10px 10px 10px 0px;
   margin: 10px 0px;
 }
 .my-chat{
   width: 60%;
   word-wrap: break-word;
   background-color: #77b3d4c7;
   padding: 7px 10px;
   border-radius: 10px 10px 0px 10px;
   margin: 5px 0px 5px auto;
  }

这是发送方结果 在此处输入图像描述

这是接收方结果 在此处输入图像描述

我无法为分离消息发送者和接收者创建逻辑请任何人都可以解决我的问题提前谢谢

标签： node.jsangularsocket.io-1.0

解决方案

你从来没有更新socketID过ChatService

this.socket.on('myId', (id)=>{
    console.log('from service',id);
    this.socketID = id;   //missing this line
});

编辑：

当您更新socketIDinChatService时，socketIdinAppComponent不会更新，因为您只设置socketId了一次 in ngOnInit。

您可以做的最简单的事情是完全摆脱该socketId字段，chatService公开并chatService.socketID直接在您的 HTML 模板中访问。

export class AppComponent {
   //public socketId: string = '';
   constructor(public chatService: ChatService){}

   //...
}

<div class="chats" *ngFor="let message of messageList">
    <div *ngIf="message">
        <div   *ngIf="chatService.socketID === message.senderId" class="client-chat"> 
            {{message.message}}
        </div>
        <div    *ngIf="chatService.socketID !== message.senderId"  class="my-chat"> 
            {{message.message}}
        </div>
    </div>
</div>

推荐阅读