在 socket.io 中提取客户端代码

Question

所以，我知道 node.js，但我正在学习如何 socket.io 和 express.js（几个小时前刚开始 express/socket）。

这不是一个大问题，但我希望我的代码干净，并且我正在尝试分解出我的客户端代码，因此它只是作为 src 在脚本标记中。例如，在我的 index.html 页面上，我有以下内容：

..
<head>
    <title>Example Title</title>
    <link href="./styles/index.css" rel="stylesheet" type="text/css" />
    <script src="./scripts/index.js" type="text/javascript"></script>
    <script src="/socket.io/socket.io.js" type="text/javascript"></script>
</head>

其中 ./scripts/index.js 是 index.html 的 javascript 代码。看起来像

var socket = io.connect("http://localhost:8000");

document.getElementById("sendBox").submit = function() {
    var msg = document.getElementById("m");socket.emit("chat message", msg.value);
    msg.value = "";
    return false;
};

所有路由都正常，但现在的问题是我在尝试使用代码时遇到错误 "ReferenceError: io is not defined"。在 socket.io 的网站上，他们的示例总是只有一个脚本标签，其中嵌入了所有页面特定的代码。我认为这很丑陋，意味着我必须编辑 html 页面才能为页面编辑我的 js。当我的编辑器中的突出显示和自动更正与 html 文件而不是 js 上的 html 对齐时，这尤其令人讨厌。这不是灾难性的事情，我可以像 socket.io 那样在他们的示例中嵌入我的代码，但我不想这样做。

对于那些对我的意思感到困惑的人，Socket.io 的初学者示例代码：

<head>
  <title>Socket.IO Chat</title>
  <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
  <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
  <script> // This is the code i want to look more like ^
    var socket = io();
    $('form').submit(function(){
      socket.emit('chat message', $('#m').val());
      $('#m').val('');
      return false;
    });
  </script> // End of the code I'd like to factor out.

总而言之，我怎样才能使变量 "io" 可用于我的 index.js 脚本？

谢谢

Answer 1

尝试交换 js 脚本标签

<head>
    <title>Example Title</title>
    <link href="./styles/index.css" rel="stylesheet" type="text/css" />
    <script src="/socket.io/socket.io.js" type="text/javascript"></script>
    <script src="./scripts/index.js" type="text/javascript"></script>
</head>

按照你的方式，它会在加载之前尝试运行 io

在 socket.io 中提取客户端代码

factoring out client side code in socket.io

javascript

refactoring

client-side

socket.io