Angular 6客户端能否连接Erlang Socket服务器？发送数据无响应求助

嘿，你已经成功搞定WebSocket连接建立这一步了，这很棒！不过收不到服务器响应确实有点让人头疼，我来帮你梳理几个关键的排查点和代码优化方向：

1. 先确认事件名称是否完全匹配 #

这是最常见的坑！你前端发送消息用的事件名，和Erlang服务器监听的事件名必须完全一致；同时服务器回复时用的事件名，也要和你前端监听的对应上。

• 你现在前端用了两种发送方式：this.socket.emit('join', ...) 和 this.socket.send(...)。其中send方法默认会触发服务器的message事件，但如果Erlang端是监听自定义事件（比如不是message而是join或者其他名称），那自然收不到响应。
• 建议先和Erlang服务端开发同学确认：
  • 服务器期望接收的事件名称是什么？
  • 服务器回复消息时用的事件名称又是什么？

2. 修复WebsocketService里的Subject创建问题 #

你当前代码里用的Rx.Subject.create已经被RxJS废弃了，而且Observer里硬编码发送固定内容'Hiiii'，这会导致不管你调用sendMsg传什么参数，实际发出去的都是这个固定值，这肯定不符合你的需求。

修正后的WebsocketService可以改成这样：

import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';
import * as io from 'socket.io-client';
import { SocketIOClient } from 'socket.io-client';

@Injectable({
  providedIn: 'root'
})
export class WebsocketService {
  private socket: SocketIOClient.Socket;
  private messageSubject = new Subject<any>();

  constructor() {}

  connect(): Subject<any> {
    // 建立连接
    this.socket = io.connect('localhost:3000');

    // 监听连接成功事件
    this.socket.on('connect', () => {
      console.log('✅ 已成功连接到WebSocket服务器');
    });

    // 监听服务器回复的消息，这里的事件名要和服务器回复时用的一致！
    this.socket.on('message', (data) => {
      console.log('📥 收到服务器消息:', data);
      this.messageSubject.next(data);
    });

    // 监听连接断开事件
    this.socket.on('disconnect', () => {
      console.log('❌ 与服务器断开连接');
    });

    // 返回一个兼具发送和接收能力的Subject
    return {
      next: (data: any) => {
        // 这里发送传入的真实数据，事件名要和服务器约定好
        this.socket.emit('join', data); 
        // 如果服务器监听的是默认message事件，就用 this.socket.send(data)
      },
      subscribe: this.messageSubject.asObservable().subscribe.bind(this.messageSubject)
    } as Subject<any>;
  }
}

3. 简化GetLocationService的代码 #

其实不需要额外的map操作（除非你需要转换数据格式），简化后更清晰：

import { Injectable } from '@angular/core';
import { WebsocketService } from './websocket.service';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class GetLocationService {
  messages: Subject<any>;

  constructor(private wsService: WebsocketService) {
    this.messages = this.wsService.connect();
  }

  sendMsg(input: any) {
    this.messages.next(input);
  }
}

4. 在组件里主动发送测试消息 #

你当前的app.component.ts只订阅了消息，但没有主动发送消息，所以服务器没收到请求自然不会回复。记得添加发送逻辑：

import { Component, OnInit } from '@angular/core';
import { GetLocationService } from './getLocation.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private liveLocServ: GetLocationService) {}

  ngOnInit() {
    // 订阅服务器回复的消息
    this.liveLocServ.messages.subscribe(msg => {
      console.log('📤 收到服务器响应:', msg);
    });

    // 主动发送测试消息，替换成你实际要发的数据
    this.liveLocServ.sendMsg('Hello from Angular 6 Client!');
  }
}

5. 用调试工具确认消息流转 #

可以用Chrome DevTools的Network -> WS面板，查看发送和接收的WebSocket帧：

• 确认前端发送的消息是否成功到达服务器
• 确认服务器是否有回复消息
• 检查回复的事件名和你前端监听的是否一致

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