用socket.io-client的小坑

最近在结合react和socket.io做应用，碰到了小坑，记录一下。

用socket.io的时候，前后台要分别引入socket.io-client 和 socket.io

在后台，因为我还用了koa，所以这里碰到了个小坑：

let Koa = require("koa");
let app = new Koa();
let server = require("http").Server(app.callback());
let io = require("socket.io")(server);

io.on("connection", function(socket){
    console.log("server connecting");
    socket.on("clientMsg", (data)=>{
        console.log(data)
        socket.emit("serverMsg", "your message" + data);
    })
});

server.listen(8081, ()=>{
    console.log("ws listening on 8081");
});

注意到这里我们采用了http模块来同时处理websocket和koa，所以监听事件需要绑定在这个http模块上面。

在浏览器端，最开始的时候我是这样做的

import io from ("socket.io-client");

let socket =  io.connect("http://localhost:8081",{
    path: "chat"
})

然后后端也把路径设为'chat'，奇怪的是无论如何都不能connect上。

反反复复查了很多资料，最后改成这样才跑通的。

let socket = require('socket.io-client')('http://localhost:8081/');

而且一旦带上path就会出错。

我不死心，查了一下路径设置，发现在用socket.io时需要用命名空间来设置路径，所以如果要把path指定为/chat,则要这样：

client:

let socket = require('socket.io-client')('http://localhost:8081/chat');

server:

io
    .of("/chat")              //指定命名空间
    .on("connection", function(socket){
    console.log("server connecting");
    socket.on("clientMsg", (data)=>{
        console.log(data)
        socket.emit("serverMsg", "your message" + data);
    })
});

搞定！