CODEWITHSUNDEEP
node.jswebsocketsocket.io
reswe teryuio
reswe teryuio

Reputation: 117

node.js socket.io code was correct but still got error?

node.js socket.io code was correct but still got error ?

....................................................................................................................................

app.js

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

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

users = {};
io.on('connection', function(socket){
    console.log('Connected');
    socket.on('setUsername', function(data){
        if(users.indexOf(data) > -1)
        {
            socket.emit('userExists', data + ' is not avariable. please use other');
        }
        else
        {
            users.push(data);
            socket.emit('userSet', {username: data});
        }
    })
    socket.on('msg', function(data){
        io.sockets.emit('newmsg', data);
    })
});

http.listen(3000, function(){
    console.log('start server on port :3000');
});

....................................................................................................................................

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Real time App chat</title>
</head>
<body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js"></script>
<script type="text/javascript">
var socket = io();
function setUsername(){
    socket.emit('setUsername', document.getElementByid('name').value);
};
var user;
socket.on('userExists', function(data){
    document.getElementByid('error-container').innerHTML = data;
});
socket.on('userSet', function(data){
    user = data.username;
    document.body.innerHTML = '<input type="text" id="message">\
                               <button type="button" name="button" onclick="sendMessage()">ส่ง</button>\
                               <div id="message-container"></div>';
});

function sendMessage(){
    var msg = document.getElementByid('message').value;
    if(msg)
    {
        socket.emit('msg', {message: msg, user: user});
    }
}

socket.on('newmsg', function(data){
    if(user)
    {
        document.getElementByid('message-container').innerHTML += '<div><b>' + data.user + '</b>:' + data.message + '</div>';
    }
})
</script>

<div id="error-container" ></div>
<input id="name" type="text" name="name" value="" placeholder="please set your name">
<button type="button" name="button" onclick="setUsername()">Start Chat</button>
</body>
</html>

When I load by node app.js, it is working good.

When I access to my-domain.com:3000, it shows the form.

But when I tried to fill data into "type text" id="name" and press button I get 2 errors.

enter image description here

How can i do for fixed it ?

Upvotes: 0

Views: 61

Answers (1)

Wejd DAGHFOUS
Wejd DAGHFOUS

Reputation: 1110

You have a typo error in your code "index.html" in this function:

function setUsername(){
   socket.emit('setUsername', document.getElementByid('name').value);
};

should be :

function setUsername(){
   socket.emit('setUsername',document.getElementById('name').value);
};

document.getElementById('name') the 'i' of id should be uppercase

Upvotes: 1

Related Questions