Socket.io in javascript gives NOT_RESOLVED error

Question

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:

maybe refer to this question for some backend code: https://stackoverflow.com/questions/9914816/what-is-an-example-of-the-simplest-possible-socket-io-example — ca1c, Oct 25 '18 at 19:30

ca1c · Answer 1 · 2018-10-25T19:36:46.100

1

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.

edited Oct 25 '18 at 19:36

answered Oct 25 '18 at 19:15

ca1c

1,111
10
23

I have updated question with my code. I have used . in html page .But it's not working. – Isanka Thalagala Oct 25 '18 at 19:21
var socket = io(); I put it just now and test it still not working. Because it's just an HTML page in a directory, not nodeJS project. – Isanka Thalagala Oct 25 '18 at 19:28
If you do not initialize the socketio server then you will not be able to use socketio in the front end. – ca1c Oct 25 '18 at 19:29
Yes, I have a socket.io backend service which is working fine. Because I test it with nodeJS client application.But I n.eed it to use existing HTML web site wich is not nodeJS – Isanka Thalagala Oct 25 '18 at 19:33
I have put reference line this . `` now it;s givin `GET http://file/socket.io/?EIO=3&transport=polling&t=MQiqHgz net::ERR_NAME_NOT_RESOLVED` – Isanka Thalagala Oct 25 '18 at 20:01

score 0 · Answer 2 · answered Oct 25 '18 at 20:22

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>

Socket.io in javascript gives NOT_RESOLVED error

2 Answers2