Socket IO 节点 Angular 聊天服务

Posted 2023-03-07

【中文标题】Socket IO 节点 Angular 聊天服务

【英文标题】：Socket IO Node Angular Chat Service

【发布时间】：2019-05-09 15:35:54

【问题描述】：

我在发布我在实施网上找到的指南时遇到的情况：https://codingblast.com/chat-application-angular-socket-io/

运行良好。转到我网站上的正确组件时，我能够连接到节点服务器。我要发布的很多代码都与我在网站上找到的非常相似。

我也到了能够看到“在端口：3000 上启动”和“用户已连接”的地步，这很有效。但我似乎无法向服务器发送消息。

这是我认为发生问题的文件：

index.js

let express = require('express');
let app = express();

let http = require('http');
let server = http.Server(app);

let socketIO = require('socket.io');
let io = socketIO(server);

const port = process.env.PORT || 3000;

io.on('connection', (socket) => 
  console.log('user connected');

  socket.on('new-message', (message) => 
    console.log(message);
  );
);

server.listen(port, () => 
  console.log(`started on port: $port`);
);

chat.componenet.html

<div class="main-container--chat">
  <div class="message-box-container">
    <div *ngFor="let message of messages">
      message
    </div>
  </div>

  <div class="chat-input">
    <input [(ngModel)]="message" (keyup)="$event.keyCode == 13 && sendMessage()"/>
    <button (click)="sendMessage()">Send</button>
  </div>
</div>

chat.component.ts

export class ChatComponent implements OnInit 
  message: string;
  messages: string[] = [];

  constructor(private chatService: ChatService) 
  

  ngOnInit() 
    this.chatService
      .getMessages()
      .subscribe((message: string) => 
        this.messages.push(message);
      );
  

  sendMessage() 
    this.chatService.sendMessage(this.message);
    this.message = '';
  

最后是 chatService.service.ts

 export class ChatService 
      private url = 'http://localhost:3000';
      private socket;

      constructor() 
        this.socket = io(this.url);
      

      public sendMessage(message) 
        this.socket.emit('new-message', message);
      

      public getMessages = () => 
        return 

    Observable.create((observer) => 
      this.socket.on('new-message', (message) => 
        observer.next(message);
      );
        );
      
    

我已尽力保持发布的代码具体。我希望它不会被瞪得太多。尤其是在星期五。

但同样，当通过 Node 运行 index.js 时。我可以看到“用户已连接”并且该端口：3000 已启动。但是，当我发送消息时，服务器永远不会收到它。另外，当我尝试 console.log("somethign random");里面：

  socket.on('new-message', (message) => 
    console.log(message);
  );

我没有看到随机控制台日志消息出现。我不认为我的命名对于新消息不正确。

我是新手，所以我希望这不是很明显。我真的很感激任何帮助。

编辑：重新启动服务器并使日志记录工作。但所有代码保持不变并添加

io.emit(message);

到

  socket.on('new-message', (message) => 
    console.log(message);
  );

我仍然没有收到 html 上的消息。

【参考方案1】：

您还需要在套接字socket.on('new-message', (message) => ) 中使用emit 上的io，特别是io.emit('new-message', message)，在服务器上使用字符串消息的有效负载另外发出/广播new-message 事件。这样，连接到此套接字的客户端可以在可观察流中接收new-message 事件。

io.on('connection', (socket) => 
  console.log('user connected');

  socket.on('new-message', (message) => 
    console.log(message);
    io.emit('new-message', message); // emit event
  );
);

您不需要对 Angular/客户端代码进行任何更改。只要记住使用complete() 的主体内的complete() 或终止/过滤运算符（例如takeUntil）来实现对可观察对象的某种拆除。否则你可能/将会有潜在的内存泄漏。

希望对您有所帮助！

【讨论】：

哇，很抱歉回复晚了。但是，它奏效了！太感谢了。谢谢你的解释。那么，如果我想要多个聊天室，是否需要为每个房间配备一个新端口？

我认为这是正确的。但是我还有另一个问题：使用socketIO类型的变量“io”，当使用“on”函数时，第一个参数是否取任意值？我在查找有关该功能的文档时遇到了一些麻烦

您可以使用房间/命名空间来代替新的套接字。查看此文档socket.io/docs/rooms-and-namespaces

第一个参数不是任意的。它是字符串事件标识符。它需要在服务器和客户端之间进行有效匹配才能发出和接收消息。

明白了，我现在才注意到这一点。再一次非常感谢你。这是让我建立联系的关键因素