Question

我需要将HTML网站连接到节点服务器聊天应用程序。 HTML客户端有一些HTML文件和javascript文件。我需要使用javascript连接socket.io聊天服务器。因此，需要在javascript中初始化socket.io端口。

我已经使用javascript在node.js中创建了socket.io聊天服务器，它工作正常。我需要使用javascript客户端站点来调用该节点服务器。它应该初始化并与套接字服务器连接。它应该能够从服务器站点发出和接收消息。

我有一个工作良好的socket.io后端服务。因为我使用nodeJS客户端应用程序对其进行了测试。但是我需要它来使用不是nodeJS的现有HTML网站

我在Google上进行了搜索，但是找不到任何有关使用javascript文件连接sockt.io的网站。所有教程都使用nodeJS。

当我使用

var io = require('socket.io').listen(server);

在javascript文件中并在浏览器中打开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>

前端错误：

未捕获的ReferenceError：未定义io
在chat-footer.html：10

这是我的文件夹结构：

Answer 1

var io = require('socket.io').listen(server);应该在服务器端。 var socket=io();应该在客户端javascript中。如果将var io放在客户端，则会收到错误消息。另外，您需要在HTML的<head>的{{1}}标签中链接套接字io库。如果没有链接库，则<script src='/socket.io/socket.io.js'></script>函数将不起作用。我希望这可以解决您的问题。

已更新

根据您的代码。您从未定义io()函数。您在前端说io();。您从未说过var socket = io.connect()是什么。应该是给另一个变量io命名，然后使用var socket = io();。

第二次更新 如果未从nodejs后端提供html页面，则您将无法使用socketio，因为它未连接到服务器。您需要从后端提供html页面，并在同一后端服务器上使用socketio。

Answer 2

我已解决该错误。原因是我无法直接添加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>

JavaScript中的Socket.io给出NOT_RESOLVED错误

2 个答案: