CODEWITHSUNDEEP
javascriptsocket.io
Isanka Thalagala
Isanka Thalagala

Reputation: 1731

Socket.io in javascript gives NOT_RESOLVED error

I need to connect HTML website to node server chat application. HTML client side has some HTML files and javascript file.I need to connect socket.io chat server using javascript. So it needs to initialize socket.io port inside javascript.

I have created socket.io chat server in node.js using javascript it is working fine. And I need to call that node server using javascript client site. It should initialize and socket server connect. It should able to emit and receive messages from the server site.

I have a socket.io backend service which is working fine. Because I test it with nodeJS client application. But I need it to use existing HTML web site which is not nodeJS

I have searched on google and can't find any website which is about connecting sockt.io using a javascript file. All tutorials are using nodeJS.

When I used 

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

inside the javascript file and open HTML page in the browser, it throws an error.

This is my code, I got this from the internet I was trying to connect this implement my real code.

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

Error in the front end:

Uncaught ReferenceError: io is not defined
at chat-footer.html:10

This is my folder structure:

enter image description here

Upvotes: 0

Views: 1757

Answers (2)

Isanka Thalagala
Isanka Thalagala

Reputation: 1731

I have resolved the error. The reason was I cannot add a socket.io reference directly because it's nodeJS script. So I added socket.io.js from nodeJS service library. By adding that my HTML page will directly refer running nodeJS server socket.io.js file.

This is my working and complete code to connect socket.io nodeJS server.

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

Upvotes: 0

ca1c
ca1c

Reputation: 1295

var io = require('socket.io').listen(server); should be on the server side. var socket=io(); should be in the client side javascript. If you are putting var io in the client side then you would get an error. Plus you need to link the socket io library in the <head> tag of the HTML: <script src='/socket.io/socket.io.js'></script>. If you do not have the library linked the io() function will not work. I hope that this solves your problem.

UPDATED

According to your code. You never defined the io(); function. You went ahead in the front end and said var socket = io.connect(). You never said what io is. What it should be is name a different variable var socket = io(); and then use var connector = io.connect().

SECOND UPDATE If the html page is not being served from the nodejs backend, you will not be able to use socketio as it is not connected to a server. You need to serve the html page from the backend and use socketio on the same backend server.

Upvotes: 1

Related Questions