Question

我正在尝试离线运行Socket.io示例程序。 index.html页面调用Jquery库，如下所示：

<script src="http://code.jquery.com/jquery-1.11.1.js"></script>

但是，如果没有互联网连接，这显然不会加载。我尝试在与项目其余部分相同的文件夹中使用文件：

 <script src="jquery-1.11.1.js"></script>

但是在运行它时，我在开发人员菜单中遇到404错误。我不确定我是否将文件放在错误的位置，或者如果我错误地使用了脚本标签，我们将不胜感激。

编辑：这是完整的index.html文件：

<!doctype html>
<html>
  <head>
    <title>Socket.IO chat</title>
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body { font: 13px Helvetica, Arial; }
      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages li { padding: 5px 10px; }
      #messages li:nth-child(odd) { background: #eee; }
    </style>
  </head>
  <body>
    <ul id="messages"></ul>
    <form action="">
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>
    <script src="/socket.io/socket.io.js"></script>
    <script src="jquery.js"></script>
    <script>
      var socket = io();
      $('form').submit(function(){
        socket.emit('chat message', $('#m').val());
        $('#m').val('');
        return false;
      });
      socket.on('chat message', function(msg){
        $('#messages').append($('<li>').text(msg));
      });
    </script>
  </body>
</html>

Picture of Error Message

Picture of index.js

Answer 1

好的，我建议将index.js更改为server.js，更有意义的是，它更像是应用程序的服务器文件。它将提供更多的东西，而不仅仅是索引页面。但是，您可以随意命名。：）

您的问题是该节点不知道您的文件系统。您使用__dirname + / index.html发回索引。 __dirname告诉节点当前目录，但在索引文件上，index.html文件上的脚本src不知道从哪里开始。

在index.js文件中，告诉节点在哪里获取所有静态文件，在第3行和第5行之间应用。

app.use('/s', express.static(__dirname + '/static'));

＆＃39; / s＆＃39;是我们要定义的静态目录的别名。 __dirname是你的根目录和＆＃39; / static＆＃39;是我想要所有静态文件的文件夹，因为我不想暴露我的整个根。

要使该确切的行有效，您需要添加一个文件夹名称＆＃34; static＆＃34;在index.js和index.html现在的目录上。

在index.html文件上，而不是

<script type="text/javascript" language="javascript" src="jquery.js">

将src更改为＆＃34; /s/jquery.js"因为node.js现在知道别名代表什么。

<script type="text/javascript" language="/s/javascript" src="jquery.js">

祝你好运

Answer 2

如果您的Html和JS文件都在同一个文件夹中，它应该可以正常工作。否则，您需要相对于当前文件放置一个地址。假设您的JS文件位于HTML文件的父文件夹中：

<script src="../jquery-1.11.1.js"></script>

Answer 3

也许这个问题可以帮助您使用本地本地资源参考How to properly reference local resources in HTML?

Answer 4

如果您的文件与html位于同一目录中，则以下内容应该可以使用：

<script src="jquery-1.10.2.js"></script>

如果它位于与HTML使用的目录中的文件夹中：

<script src="FOLDERNAME/jquery-1.10.2.js"></script>

如果它高于HTML文件，请使用：

<script src="../jquery-1.10.2.js"></script>

如果这些工作都不能确保仔细检查文件的名称，以防文件名称的开头或结尾有空格。

<强> [编辑]

好吧，如果没有拼写错误并且放置位置的更改无法解决，那么可能一个或两个文件都已损坏。顺便说一下，你的jQuery版本已经过时了。下载v2.1.1或使用此脚本标记：

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 5

不要忘记您可以通过在浏览器中输入确切的（本地）URL来访问jquery文件。通过加载网址http://localhost:[port#]/jquery-1.11.1.js进行测试将此URL更改为dev环境的正确目录路径，直到jquery成功加载为止。

Answer 6

保罗尝试以下：

验证jquery文件名和路径如果使用jQuery的socket.io.js改变了

这样的顺序

<script src="jquery.js"></script>
<script src="/socket.io/socket.io.js"></script>

在页面加载后调用javascript代码，即$（function（）{}），如下所示：

$(function(){
var socket = io();
  $('form').submit(function(){
    socket.emit('chat message', $('#m').val());
    $('#m').val('');
    return false;
  });
  socket.on('chat message', function(msg){
    $('#messages').append($('<li>').text(msg));
  });
})

由于

Answer 7

我有同样的问题，我一直在寻找解决方案。我找到了你的问题，但我没有找到答案，所以我在这里发布了自己的问题。实际上有人知道如何让它发挥作用。所以，如果您仍然想知道我得到的答案：Raspberry Pi - Flask Server using JQuery not working Offline (Online it works)

HTML脚本src - Jquery库不会从文件加载

7 个答案: