NodeJS+Angular8 Socket.io聊天应用客户端收不到消息排查

嘿，我帮你排查了下你遇到的问题——这跟localhost没关系，都是代码里的两处关键错误导致的：

1. Node.js服务器的消息发送错误 #

在服务器监听new-message事件的回调里，你写了io.emit(message)，这是错误的用法：socket.io的emit方法第一个参数必须是事件名称，第二个才是要传递的数据。你直接把消息内容作为第一个参数传，客户端根本监听不到对应的new-message事件。

2. Angular服务的Observable提前完成 #

你的ChatService里，getMessages方法中调用了observer.complete()，这会让Observable在收到第一条消息后就立即终止，后续的消息就再也接收不到了。

修正后的代码 #

Node.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);
 // 修正：第一个参数指定事件名，第二个传消息内容
 io.emit('new-message', message);
 });
});

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

Angular ChatService代码 #

import * as io from 'socket.io-client';
import { Observable } from 'rxjs/Observable';
import {Observer} from 'rxjs';

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 new Observable((observer) => {
 this.socket.on('new-message', (message) => {
 observer.next(message);
 // 移除complete调用，让Observable持续监听消息
 });
 });
 }
}

补充：AppModule的必要修正 #

你的AppModule还缺了关键的模块导入和启动配置，不然Angular应用无法正常运行：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component'; // 根据你的实际路径调整

@NgModule({
 declarations: [
 AppComponent,
 HomeComponent
 ],
 imports: [
 BrowserModule // 必须导入这个才能运行Angular组件
 ],
 providers: [
 ChatService
 ],
 bootstrap: [AppComponent] // 指定根组件，启动应用
})
export class AppModule { }

验证说明 #

修改完成后，重启Node.js服务器和Angular应用，你会发现服务器收到消息后，能正确广播给客户端，客户端也能持续接收新消息了。localhost在这里完全没问题，只要客户端和服务器在同一机器上运行，这种连接方式是有效的。

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