Question

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的正确形式是什么？

Answer 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()

Answer 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文件并将THAT导入您的index.html中。您可以查看示例here

为什么import不起作用？

因为import是ES6运算符。开箱即用的浏览器不支持该功能。哎呀，甚至节点也不支持import和export。这就是为什么您需要将它们转换（转换）为ES5语法，以便甚至浏览器也可以运行它。您可以签出可信赖的Babel REPL，然后亲自将Es6转换为Es5以获得感觉。

Answer 3

如果你遵循 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));

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

4 个答案: