如何在vanilla javascript中从客户端导入socket.io？_Javascript_Node.js_Socket.io

如何在vanilla javascript中从客户端导入socket.io？

javascript node.js socket.io

如何在vanilla javascript中从客户端导入socket.io？,javascript,node.js,socket.io,Javascript,Node.js,Socket.io,socket.io的官方文档中有一个从客户端导入和使用socket.io的示例，如下所示： index.html $（函数（）{ var socket=io（）； //这里还有其他一些代码。。。 }); 您可以执行以下操作：将其放入您的index.html： //这里有一些代码。。。有多种方法，最简单的一种：您可以只使用socket.io客户端，也可以从dist文件夹提供服务。它将把io对象添加到窗口。这意味着，io将是一个您可以使用的全局变量您需要使用script标记将其添加到

socket.io

的官方文档中有一个从客户端导入和使用

socket.io

的示例，如下所示：

index.html


$（函数（）{
var socket=io（）；
//这里还有其他一些代码。。。
});

您可以执行以下操作：

将其放入您的index.html：


//这里有一些代码。。。

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

您可以只使用

socket.io客户端

，也可以从

dist

文件夹提供服务。它将把

io

对象添加到

窗口

。这意味着，

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>


变量套接字=io（'http://localhost');
socket.on（'news'，函数（数据）{
控制台日志（数据）；
emit（'my other event'，{my:'data'}）；
});

或，您可以使用

webpack

或

browserify

构建JS文件并将其导入

index.html

。您可以查看示例

为什么导入

不起作用？

因为import
是ES6操作员。而开箱即用的浏览器不支持这一点。见鬼，即使是节点也不支持导入
和导出
。这就是为什么您需要将它们转换为ES5语法，以便浏览器也可以运行它。您可以查看trusty并自己将Es6转换为Es5，以获得这种感觉
 
<!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);

文件
var socket=io（socket\u端点）；
在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回购了吗？在dist文件夹中打开socket.io.dev.js
，您可以看到他们已经在编译/传输代码供您使用。这就是为什么我说要么使用预编译版本，要么使用webpack/browserify编译自己的版本。再次查看文档。里面没有关于main.js的内容。都在index.html
@Ehsan中。您是否尝试过如上所述导入？我检查了我的旧项目，它工作得很好。