如何在 vanilla javascript 中从客户端导入 socket.io？
[英]How to import socket.io from client-side in vanilla javascript?
问题描述
The official documentation of socket.io has an example of importing and using socket.io from client-side like this: 
socket.io的官方文档有一个从客户端导入和使用socket.io的例子，如下所示：
index.html索引.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>
Now I'm trying to put my js code inside a main.js file (beside index.html in public folder).现在我试图将我的js代码放在main.js文件中（在public文件夹中的index.html旁边）。 This is what I do which gives me Unexpected identifier :这就是我所做的，它给了我Unexpected identifier ：
main.js主文件
import io from "../socket.io/socket.io.js" const socket = io() // Some other code here...
What is the right form of importing socket.io in this case?在这种情况下导入socket.io的正确形式是什么？
4 个解决方案
解决方案1
1 已采纳 2019-06-21 17:00:06
You can do this:你可以这样做：
Putting this in your index.html :把它放在你的index.html 中：
<body> <script src="/socket.io/socket.io.js"></script> <script src="main.js"> // some code here... </body>
And putting this in your main.js :并将其放在您的main.js 中：
var socket = io()
解决方案2
1 2019-06-21 17:01:22
There are multiple ways, The simplest one:方法很多，最简单的一种：
You can just use a socket.io-client CDN or serve from the dist folder socket.io-client github repository .您可以只使用socket.io-client CDN或从dist文件夹socket.io-client github repository 提供服务。 It will add the io object to window .它将io对象添加到window 。 Which baically means that io will be a global variable that you can use.这基本上意味着io将是您可以使用的全局变量。
You need to add it to your html page using the script tag.您需要使用script标记将其添加到您的 html 页面。
and you can use it as:您可以将其用作：
<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>
Or, You can use webpack or browserify to build the JS file and import THAT in your index.html .或者，你可以使用webpack或browserify打造的JS文件并导入，在您index.html 。 You can check out examples here您可以在此处查看示例
Why import doesn't work?为什么import不起作用？
Because import is an ES6 operator.因为import是 ES6 操作符。 And browsers out of the box don't support that.开箱即用的浏览器不支持这一点。 Heck, even node doesn't support import and export .哎呀，即使 node 也不支持import和export 。 That's why you need to transpile(convert) them to ES5 syntaxes so that even browsers can run it.这就是为什么您需要将它们转译（转换）为 ES5 语法，以便浏览器也可以运行它。 You can check out the trusty Babel REPL and convert Es6 to Es5 yourself to get the feel.您可以查看可信赖的Babel REPL并自己将 Es6 转换为 Es5 以获得感觉。
解决方案3
0 2020-06-08 20:57:39
<!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
0 2021-07-15 11:26:11
if you follow socket.io documentation you should just add these lines如果你遵循 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> and make sure to add these lines to your index.js并确保将这些行添加到您的 index.js
const path = require("path"); app.use(express.static(__dirname));
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.