如何从香草javascript中的客户端导入socket.io？答案

【问题标题】：How to import socket.io from client-side in vanilla javascript?如何从香草javascript中的客户端导入socket.io？
【发布时间】：2019-06-21 16:39:14
【问题描述】：

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 文件中（在index.html 旁边的public 文件夹中）。这就是我所做的，这给了我Unexpected identifier：

main.js

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

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

【问题讨论】：

如果你想使用本地版本的客户端JS文件，你可以在node_modules/socket.io/client-dist/socket.io.js找到它
或者 npm install socket.io-client 然后 const { io } = require("socket.io-client");常量套接字 = io();

标签： javascript node.js 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()

【讨论】：

再次检查文档。里面没有关于main.js 的内容。都在index.html 里面。
@Ehsan 你试过我上面提到的导入吗？我在我的旧项目上检查了它，它工作得很好。

【解决方案2】：

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

您可以只使用socket.io-client CDN 或从dist 文件夹socket.io-client github repository 提供服务。它将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。您可以查看示例here

为什么import 不起作用？

因为import 是一个 ES6 运算符。开箱即用的浏览器不支持这一点。哎呀，即使节点不支持import 和export。这就是为什么您需要将它们转换（转换）为 ES5 语法，以便浏览器也可以运行它。您可以查看可信赖的Babel REPL 并自己将 Es6 转换为 Es5 以感受一下。

【讨论】：

在html 中写入js 和将js 放入main.js 时应该没有太大区别。为什么在html里面写js的时候不导入任何外部库或者使用webpack？？？
编辑了答案，添加了那一点。
您还需要在main.js 中放入与您放入html 文件相同的脚本。因为您实际上所做的只是制作另一个文件。用html写JS和用客户端JS写完全一样。
关于 ES6 和 ES5 的事情有点道理......但是 src="/socket.io/socket.io.js" 从哪里得到模块？我没有渲染那个页面，只是使用节点的sendFile，所以我不期待任何 ES6 到 ES5 的转换！
你打开我添加的github repo了吗？在 dist 文件夹中打开 socket.io.dev.js ，您可以看到他们已经在编译/转换代码供您使用。这就是为什么我说要么使用预编译版本，要么使用 webpack/browserify 编译你自己的版本。

【解决方案3】：

<!DOCTYPE html>
<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.4/socket.io.js"> 
    </script>
    <script>
        var socket = io(SOCKET_ENDPOINT);

【讨论】：

【解决方案4】：

如果你遵循 socket.io 文档，你应该添加这些行

  <body>
    <ul id="messages"></ul>
    <form id="form" action="">
      <input id="input" autocomplete="off" /><button>Send</button>
    </form>
  </body>
  <script src="/socket.io/socket.io.js"></script>
  <script src="main.js"></script>
</html>

并确保将这些行添加到您的 index.js

const path = require("path"); app.use(express.static(__dirname));

【讨论】：