CODEWITHSUNDEEP
javascriptnode.jssocket.iochat
Shyamjith Cherukara
Shyamjith Cherukara

Reputation: 23

Node JS Socket IO Chat issue

I am developing a one to one chat application using node js and socket .io

but when i try running my chat.html it gives an error "Reference Error io is not defined".

I googled this issue and i found a solution it says use cdn, i tried that too . but this time error was different it is "cannot find method connect"

socket.io.js is there at node_modules\socket.io\lib

when i tried to access it through browser its says " cannot get socket.io.js"

here i am pasting my code . please help me on this

Server.js

var app = require('express').createServer();
var io = require('socket.io').listen(app);
var fs = require('fs');

app.listen(8080);


app.get('/', function (req, res) {
    res.sendfile(__dirname + '/chat.html');
});


var usernames = {};

function check_key(v) {
    var val = '';

    for (var key in usernames) {
        if (usernames[key] == v)
            val = key;
    }
    return val;
}

io.sockets.on('connection', function (socket) {


    socket.on('sendchat', function (data) {

        io.sockets.emit('updatechat', socket.username, data);
    });


    socket.on('adduser', function (username) {

        socket.username = username;

        usernames[username] = socket.id;

        socket.emit('updatechat', 'SERVER', 'you have connected');

        socket.emit('store_username', username);

        socket.broadcast.emit('updatechat', 'SERVER', username + ' has connected: ' + socket.id);

        io.sockets.emit('updateusers', usernames);
    });


    socket.on('disconnect', function () {

        delete usernames[socket.username];

        io.sockets.emit('updateusers', usernames);

        socket.broadcast.emit('updatechat', 'SERVER', socket.username + ' has disconnected');
    });


    socket.on('check_user', function (asker, id) {

        io.sockets.socket(usernames[asker]).emit('msg_user_found', check_key(id));
    });


    socket.on('msg_user', function (usr, username, msg) {

        io.sockets.socket(usernames[usr]).emit('msg_user_handle', username, msg);

        fs.writeFile("chat_data.txt", msg, function (err) {
            if (err) {
                console.log(err);
            }
        });
    });


});

Chat.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="/socket.io/socket.io.js "></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript">
        var my_username = '';
        try {
            function send_individual_msg(id) {

                socket.emit('check_user', my_username, id);

            }

            var socket = io.connect('http://localhost:8008');


            socket.on('connect', function () {

                socket.emit('adduser', prompt("What's your name?"));
            });


            socket.on('msg_user_handle', function (username, data) {
                $('#conversation').append('<b>' + username + ':</b> ' + data + '<br>');
            });


            socket.on('msg_user_found', function (username) {

                socket.emit('msg_user', username, my_username, prompt("Type your message:"));
            });


            socket.on('updatechat', function (username, data) {
                $('#conversation').append('<b>' + username + ':</b> ' + data + '<br>');
            });


            socket.on('store_username', function (username) {
                my_username = username;
            });


            socket.on('updateusers', function (data) {

                $('#users').empty();
                $.each(data, function (key, value) {
                    $('#users').append('<div style="cursor:pointer;" onclick="send_individual_msg(\'' + value + '\')">' + key + '</div>');
                });
            });


            $(function () {

                $('#datasend').click(function () {
                    var message = $('#data').val();
                    if (message == '' || jQuery.trim(message).length == 0)
                        return false;
                    $('#data').val('');

                    socket.emit('sendchat', message);
                });


                $('#data').keypress(function (e) {
                    if (e.which == 13) {
                        $(this).blur();

                        $('#datasend').click();
                    }
                });
            });
        }
        catch (err) {
            alert(err);
        }

    </script>
</head>
<body>
    <div style="float: left; width: 100px; border-right: 1px solid black; height: 300px;
        padding: 10px; overflow: scroll-y;">
        <b>USERS</b>
        <div id="users">
        </div>
    </div>
    <div style="float: left; width: 550px; height: 250px; overflow: scroll-y; padding: 10px;">
        <div id="conversation">
        </div>
        <input id="data" style="width: 200px;" />
        <input type="button" id="datasend" value="send" />
    </div>
</body>
</html>

Upvotes: 1

Views: 661

Answers (2)

Nabajit Das
Nabajit Das

Reputation: 11

Since you are using a static file, that is socketio.js you need to use

//For including static files in expressJS
app.use(express.static(__dirname + '/'));

or

Express provides a built-in middleware express.static to serve static files, such as images, CSS, JavaScript, etc.

You simply need to pass the name of the directory where you keep your static assets, to the express.static middleware to start serving the files directly. For example, if you keep your images, CSS, and JavaScript files in a directory named public, you can do this −

app.use(express.static('public'));

Place your /socket.io/socket.io.js in side public directory

Upvotes: 0

Thomas-B
Thomas-B

Reputation: 151

Since you are using Express, you should put your client-side socket.io.js file in the 

public/javascripts

and in your HTML file the path of your file will be : 

javascripts/socket.io.js

Upvotes: 2

Related Questions