Socket IO 节点 Angular 聊天服务

Question

我在发布我在实施网上找到的指南时遇到的情况：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 上的消息。

Answer 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）来实现对可观察对象的某种拆除。否则你可能/将会有潜在的内存泄漏。

希望对您有所帮助！