node.js - 如何在纯 JavaScript 客户端中导入 socket.io？

socket.io 的官方文档有一个示例，说明如何从客户端导入并使用 socket.io，如下所示：

index.html

<body>
  <script src="/socket.io/socket.io.js"></script>
  <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
  <script>
    $(function () {
      var socket = io();
      // Some other code in here...
    });
  </script>
</body>

现在我正在尝试把我的 js 代码放入一个 main.js 文件中（在 public 文件夹的 index.html 旁边）。这是我所做的，它给我 Unexpected identifier 错误：

main.js

import io from "../socket.io/socket.io.js"
const socket = io()
// Some other code here...

在这种情况下，导入 socket.io 的正确形式是什么？

答案＃1

你可以这样做：

将此放入你的 index.html ：

<body>
  <script src="/socket.io/socket.io.js"></script>
  <script src="main.js">
  // some code here...
</body>

并将此放入你的 main.js ：

var socket = io()

答案＃2

有多种方法，最简单的一种是：

你可以直接使用 socket.io-client 的 CDN，或者从 dist 文件夹的 socket.io-client GitHub 仓库中提供。它会将 io 对象添加到 window 上。这基本上意味着 io 将是一个你可以使用的全局变量。

你需要使用 script 标签将其添加到你的 HTML 页面中。

你可以这样使用它：

<script src="/socket.io/socket.io.js"></script>
<script type="text/javascript">
    var socket = io('http://localhost');
      socket.on('news', function (data) {
        console.log(data);
        socket.emit('my other event', { my: 'data' });
    });
</script>

或者， 你可以使用 webpack 或 browserify 来构建 JS 文件，然后在你的 index.html 中导入它。你可以在这里查看示例

为什么 import 不起作用？

因为 import 是 ES6 的操作符。而且浏览器默认不支持它。甚至连 Node 也不支持 import 和 export。这就是为什么你需要将它们转译（转换）为 ES5 语法，以便浏览器也能运行。你可以查看可靠的 Babel REPL，自己将 ES6 转换为 ES5 来感受一下。