Socket.IO连接事件无法在控制台打印问题求助

嘿，我帮你排查出问题所在了！你服务器端的代码没问题，但客户端这边漏掉了关键的一步——没有引入Socket.io的客户端库，导致浏览器里根本找不到io这个对象，自然没法和服务器建立连接，服务器也就打不出那个a user connected的日志了。

接下来按步骤调整就行：

1. 给HTML加上Socket.io客户端脚本 #

Socket.io的服务器会自动托管客户端脚本，你只需要在main.js之前，把这行代码加到index.html里：

<script src="/socket.io/socket.io.js"></script>

这行代码会让浏览器从服务器获取Socket.io的客户端文件，这样main.js里的io.connect()才能正常工作。

2. 调整脚本引入顺序 #

一定要把上面的脚本放在你的main.js前面，不然main.js运行的时候，io对象还没被定义呢。修改后的脚本区域应该是这样：

<!-- Socket.io Client Library -->
<script src="/socket.io/socket.io.js"></script>
<!-- Client Side -->
<script src="./main.js"></script>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous" ></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous" ></script>

3. （可选）简化客户端连接代码 #

在Socket.io 2.x版本里，io.connect()可以直接简化成io()，效果完全一致，你的main.js可以改成：

var socket = io();

最后验证一下 #

重启你的服务器（执行node app.js），然后刷新浏览器，这时候服务器控制台应该就能看到a user connected的日志了！如果还是有问题，打开浏览器开发者工具的Network标签，看看有没有socket.io开头的请求——要是有，说明连接在正常建立；要是没有，再检查一下脚本路径有没有写错。

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