`require 'socket.io-client.js'` 不工作

Question

我能够在我自己的服务器上运行基本的 socket.io 服务器应用程序，并直接通过任何 Web 浏览器请求它（我尝试了 FF、chrome 和 IE7，它们都有效）。

现在，问题在于客户端示例代码对我不起作用，并且我在 chrome 的 javascript 控制台中收到以下错误：

“Uncaught ReferenceError: require is not Defined”引用了socket.io.js中的这行代码： var client = require('socket.io-client');

这让我相信它无法识别 require 命令期间，这看起来很奇怪。其他一些事情 - 我正在运行 apache，因此将所有 socket.io 文件移到我的 apache 目录 htdocs 中，以便通过 http 端口 80 进行访问，该端口是使用 cygwin 和指南安装的： https://github.com/joyent/node/wiki/Building-node.js-on-Cygwin-(Windows)

socket.io 文件也安装在 cygwin 目录下我的 c: 驱动器位于 Windows 中，如果通过 apache 访问，它们就没有用处。另一个花絮 - 我确实有一个 socket.io-client.js 文件，但是当我打开它使用写字板进行编辑时，它看起来已损坏，里面只有一行文本： ÿþi

Answer 1

require() 函数是 Node.js 的一项功能，仅适用于服务器端运行的 Javascript。要在浏览器中包含文件，您必须使用常规方法：

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

Node.js 通常以将 socket.io 服务器附加到 Web 服务器实例的方式设置，该实例也是 Node.js 的一部分服务器。代码示例直接取自 socket.io“如何使用” 页面，这将是在服务器端：

var app = require('http').createServer(handler)
  , io = require('socket.io').listen(app)
  , fs = require('fs')
app.listen(80);

如果按照上面的方式使用，Node.js 是同时提供网页静态部分的服务器，Node.js 服务器的地址是包含客户端脚本的引用。

另一个用例是当静态 html 由您的主 Web 服务器提供服务并且您尝试连接到可能位于另一个地址或另一个端口或两者中的 Node.js 实例时。 Socket.io.js 不由您的主 Web 服务器提供服务。它直接由 Node.js 服务器上运行的 socket.io 提供服务。您必须向客户端浏览器提供 Node.js 服务器地址才能获取 socket.io 客户端 Javascript 文件，如下所示：

<script src="http://nodejs.address:port/socket.io/socket.io.js"></script>

<script>
  var socket = io.connect('http://nodejs.address:port');
  socket.on('news', function (data) {
    console.log(data);
    socket.emit('my other event', { my: 'data' });
});
</script>

作为旁注，有提供 require() 函数的客户端 javascript 库，请检查 客户端需要 Javascript

Answer 2

您可以使用 Browserify (http://browserify.org) 或 WebPack (http://webpack.github.io) 要在客户端使用类似节点的 CommonJS 需要。

Answer 3

我使用 browserify 来管理浏览器端代码的所有 require() 资源。

也就是说，我能够通过以下方式在浏览器端代码上要求 socket.io-client：

var io = require('socket.io-client');
var $ = require('jquery');

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));
});

与使用在 socket.io 的 github 示例中找到的传统脚本标记格式的以下代码片段相反： https://github.com/rauchg/chat-example/blob/master/index.html< /a>

<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>
    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>

socket.io-client 可以通过执行以下操作将其作为节点模下载到您的开发环境中：

npm install socket.io-client