如何从 ws 客户端连接 socket.io？

Question

我有一个很简单的socket.io聊天例子，服务端代码是这样的：

https://github.com/js-demos/socketio-chat-demo/blob/master/index.js

var express = require('express');
var app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.use(express.static('public'));

io.on('connection', function(socket){
  socket.on('chat message', function(msg){
    io.emit('chat message', msg);
  });
});

http.listen(3000, function(){
  console.log('listening on *:3000');
});

客户端使用socket io代码连接，运行良好：

https://github.com/js-demos/socketio-chat-demo/blob/master/public%2Findex.html

<script>
  var socket = io();
  $('form').submit(function(){
    socket.emit('chat message', $('#m').val());
    $('#m').val('');
    return false;
  });
  socket.on('chat message', function(msg){
    $('#messages').append($('<li>').text(msg));
  });
</script>

但是我想使用其他一些 websocket 客户端来连接服务器，比如wscat:

npm install -g wscat
wscat ws://localhost:3000

但无法连接，出现此错误：

error: Error: socket hang up

我的网址ws://localhost:3000 错了吗？如何让它发挥作用？

PS：大家可以看看这个项目https://github.com/js-demos/socketio-chat-demo/试试看

Answer 1

从Chrome Dev Tools中，我找到了真正的websocket url，应该是：

ws://localhost:3000/socket.io/?EIO=3&transport=websocket

将此网址与 wscat 一起使用效果很好

Answer 2

同意@freewind 的回答，我想更深入地了解详细描述。

ws://localhost:3000/socket.io/?EIO=3&transport=websocket

规范可以描述为

+----------------+--------------------+
|      Elm       |        Desc        |
+----------------+--------------------+
| WS             | scheme             |
| localhost:3000 | host               |
| socket.io      | path               |
| EIO=3          | EngineIO version 3 |
| transport      | websocket          |
+----------------+--------------------+

如果传输设置为websocket，那么它可以使用任何 WebSocket 客户端进行测试，因为它正在使用 WebSocket 协议升级连接。

我们可以使用Firecamp WebSocket Client 轻松测试和调试它。连接将如下图所示。

Firecamp 是 SocketIO and WebSocket 的 GUI 客户端。

1. SocketIO

下面画面的配置会是这样的

import io from "socket.io-client";
const socket = io( "http://localhost:3000/socket.io", 
 {
  "path": "/socketio",
  "transports": [
    "websocket"
  ]
 }
);

2。 WebSocket

同一个socket端点，我们可以用WebSocket客户端进行测试，如下图所示

- WS 连接

- WS 提要数据