5

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

索引.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.htmlpublicUnexpected identifier

main.js

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

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

4

4 回答 4

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. 您可以在此处查看示例

为什么import不起作用？

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

于 2019-06-21T17:01:22.160 回答
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()

于 2019-06-21T17:00:06.887 回答
0

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

于 2021-07-15T11:26:11.680 回答
0 
<!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);
于 2020-06-08T20:57:39.850 回答