Socket IO Node Angular 聊天服务

Question

Socket IO Node Angular 聊天服务

node.jsangularsocket.io

3

我在这里发布一个与编程有关的情况，我遇到了在线指南的实现问题：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);
  });

我没有看到那个随机的控制台日志消息出现。我不认为我的new-message命名有误。

我是新手，所以希望这不是什么显而易见的问题。我非常感谢任何帮助。

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

io.emit(message);

到

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

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

- JD333

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alexander Staroselsky · Accepted Answer

您需要使用emit在服务器上向io广播new-message事件，并将字符串消息的负载作为参数传递，具体方法是：io.emit('new-message', message)，同时在socket socket.on('new-message', (message) => { })中。这样，连接到此socket的客户端可以在可观察流中接收到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()的主体中实现某种类型的可观察对象拆除，或使用终止/过滤运算符，例如takeUntil。否则，可能会出现潜在的内存泄漏。

希望这可以帮助到您！