javascript 中的 Socket.io 出现 NOT_RESOLVED 错误
我需要将 HTML 网站连接到节点服务器聊天应用程序。HTML 客户端有一些 HTML 文件和 javascript 文件。我需要使用 javascript 连接 socket.io 聊天服务器。因此它需要在 javascript 内部初始化 socket.io 端口。
我已经使用 javascript 在 node.js 中创建了 socket.io 聊天服务器，它运行良好。我需要使用 javascript 客户端站点调用该节点服务器。 它应该初始化并连接套接字服务器。它应该能够从服务器站点发送和接收消息。
我有一个 socket.io 后端服务，它运行良好。因为我用 nodeJS 客户端应用程序测试了它。但我需要它使用现有的非 nodeJS HTML 网站
我在谷歌上搜索过，找不到任何关于使用 javascript 文件连接 sockt.io 的网站。所有教程都使用 nodeJS。
当我在 javascript 文件中使用
var io = require('socket.io').listen(server);
并在浏览器中打开 HTML 页面时，它会引发错误。
这是我的代码，我从互联网上获得了它，我试图连接它以实现我的真实代码。
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
// socket.io specific code
var socket = io.connect('http://localhost:8000');
socket.on('connect', function () {
$('#chat').addClass('connected');
});
socket.on('announcement', function (msg) {
$('#lines').append($('<p>').append($('<em>').text(msg)));
});
socket.on('nicknames', function (nicknames) {
$('#nicknames').empty().append($('<span>Online: </span>'));
for (var i in nicknames) {
$('#nicknames').append($('<b>').text(nicknames[i]));
}
});
socket.on('user message', message);
socket.on('reconnect', function () {
$('#lines').remove();
message('System', 'Reconnected to the server');
});
socket.on('reconnecting', function () {
message('System', 'Attempting to re-connect to the server');
});
socket.on('error', function (e) {
message('System', e ? e : 'A unknown error occurred');
});
function message(from, msg) {
$('#lines').append($('<p>').append($('<b>').text(from), msg));
}
// dom manipulation
$(function () {
$('#set-nickname').submit(function (ev) {
socket.emit('nickname', $('#nick').val(), function (set) {
if (!set) {
clear();
return $('#chat').addClass('nickname-set');
}
$('#nickname-err').css('visibility', 'visible');
});
return false;
});
$('#send-message').submit(function () {
message('me', $('#message').val());
socket.emit('user message', $('#message').val());
clear();
$('#lines').get(0).scrollTop = 10000000;
return false;
});
function clear() {
$('#message').val('').focus();
};
});
</script>
</head>
<body>
<div id="chat">
<div id="nickname">
<form id="set-nickname" class="wrap">
<p>Please type in your nickname and press enter.</p>
<input id="nick">
<p id="nickname-err">Nickname already in use</p>
</form>
</div>
<div id="connecting">
<div class="wrap">Connecting to socket.io server</div>
</div>
<div id="messages">
<div id="nicknames"></div>
<div id="lines"></div>
</div>
<form id="send-message">
<input id="message">
<button>Send</button>
</form>
</div>
</body>
</html>前端错误：
Uncaught ReferenceError: io is not defined
at chat-footer.html:10
这是我的文件夹结构：
var io = require('socket.io').listen(server);
应该在服务器端。
var socket=io();
应该在客户端 javascript 中。如果您将
var io
放在客户端，那么您将收到错误。此外，您需要在 HTML 的
<head>
标记中链接套接字 io 库：
<script src='/socket.io/socket.io.js'></script>
。如果您没有链接库，
io()
函数将不起作用。我希望这能解决您的问题。
已更新
根据您的代码。您从未定义过
io();
函数。您在前端继续说
var socket = io.connect()
。您从未说过
io
是什么。它应该是将另一个变量命名为
var socket = io();
，然后使用
var Connector = io.connect()
。
第二次更新 如果 html 页面未从 nodejs 后端提供服务，您将无法使用 socketio，因为它未连接到服务器。您需要从后端提供 html 页面，并在同一个后端服务器上使用 socketio。
我已解决该错误。原因是我无法直接添加 socket.io 引用，因为它是 nodeJS 脚本。因此，我从 nodeJS 服务库添加了 socket.io.js。通过添加，我的 HTML 页面将直接引用正在运行的 nodeJS 服务器 socket.io.js 文件。
这是我用于连接 socket.io nodeJS 服务器的有效完整代码。
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://localhost:8000/socket.io/socket.io.js"></script> // add this line
<script>
var socket = io.connect('http://localhost:8000');
socket.on('connect', function () {
$('#chat').addClass('connected');
});
socket.on('announcement', function (msg) {
$('#lines').append($('<p>').append($('<em>').text(msg)));
});
socket.on('nicknames', function (nicknames) {
$('#nicknames').empty().append($('<span>Online: </span>'));
for (var i in nicknames) {
$('#nicknames').append($('<b>').text(nicknames[i]));
}
});
socket.on('user message', message);
socket.on('reconnect', function () {
$('#lines').remove();
message('System', 'Reconnected to the server');
});
socket.on('reconnecting', function () {
message('System', 'Attempting to re-connect to the server');
});
socket.on('error', function (e) {
message('System', e ? e : 'A unknown error occurred');
});
function message(from, msg) {
$('#lines').append($('<p>').append($('<b>').text(from), msg));
}
// dom manipulation
$(function () {
$('#set-nickname').submit(function (ev) {
socket.emit('nickname', $('#nick').val(), function (set) {
if (!set) {
clear();
return $('#chat').addClass('nickname-set');
}
$('#nickname-err').css('visibility', 'visible');
});
return false;
});
$('#send-message').submit(function () {
message('me', $('#message').val());
socket.emit('user message', $('#message').val());
clear();
$('#lines').get(0).scrollTop = 10000000;
return false;
});
function clear() {
$('#message').val('').focus();
};
});
</script>
</head>
<body>
<div id="chat">
<div id="nickname">
<form id="set-nickname" class="wrap">
<p>Please type in your nickname and press enter.</p>
<input id="nick">
<p id="nickname-err">Nickname already in use</p>
</form>
</div>
<div id="connecting">
<div class="wrap">Connecting to socket.io server</div>
</div>
<div id="messages">
<div id="nicknames"></div>
<div id="lines"></div>
</div>
<form id="send-message">
<input id="message">
<button>Send</button>
</form>
</div>
</body>
</html>