rxjs/webSocket - 到“ws://localhost:3000/”的 WebSocket 连接失败：连接在收到握手响应之前关闭

Posted 2023-03-07

【中文标题】rxjs/webSocket - 到“ws://localhost:3000/”的 WebSocket 连接失败：连接在收到握手响应之前关闭

【英文标题】：rxjs/webSocket - WebSocket connection to 'ws://localhost:3000/' failed: Connection closed before receiving a handshake response

【发布时间】：2020-08-17 16:18:08

【问题描述】：

我已经在后端初始化了 WebSocket。 然后使用rxjs/webSocket连接，浏览器收到如下错误：

connection to 'ws://localhost:3000/' failed: Connection closed before receiving a handshake response

server.js 相关代码：

const  app, onServerInitialized  = require('./app');

const port = normalizePort(process.env.PORT);
console.log('Server is running on port ' + process.env.PORT);
app.set('port', port);

const server = http.createServer(app);
onServerInitialized(server);

app.js相关代码：

const app = express();

const onServerInitialized = server => 
    const io = socketio(server);

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

module.exports =  app, onServerInitialized ;

WebSocket服务

import  webSocket, WebSocketSubject  from 'rxjs/webSocket';

export class WebSocketService 
    private ws$: WebSocketSubject<any> = webSocket('ws://localhost:3000');

    public getWSListener() 
        return this.ws$.asObservable().pipe();
    

    public sendMessage(message: string) 
        this.ws$.next( message );
    

app.component.ts

constructor(
  private webSocketService: WebSocketService,
) 

ngOnInit() 
  this.webSocketService.getWSListener().subscribe(() => 
    console.log('event')
  );

【参考方案1】：

您正在使用socket.io 包，并且此包的服务器设置在/socket.io 路径。所以试试这个 uri：ws://localhost:3000/socket.io/?EIO=3&transport=websocket

还要确保在onServerInitialized 函数中你不需要在底部添加这一行

io.listen(+process.env.PORT);

编辑：

最好使用ngx-socket-io 打包到 Angular 项目中

【讨论】：

然后试试这个uri：ws://localhost:3000/socket.io/?EIO=3&transport=websocket，但恐怕你必须使用ngx-socket-io包

成功了！你能解释一下为什么我们需要这个参数吗？

EIO 是Engine.IO 版本，在这种情况下版本是3 - 最新，transport 参数是强制协议，因为socket.io 可以在http 和ws 上工作