간단한 Express 3.x socket.io chat

Question

다음은 매우 인기있는 webtutorial의 일부 코드입니다. Express 3.x를 사용하기 위해 일부 변경되었습니다.

var express = require('express') 
    , http = require('http'); 

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

server.listen(8000); 
// routing 
app.get('/', function (req, res) { 
    res.sendfile(__dirname + '/index.html'); 
}); 

// usernames which are currently connected to the chat 
var usernames = {}; 

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

    // when the client emits 'sendchat', this listens and executes 
    socket.on('sendchat', function (data) { 
     // we tell the client to execute 'updatechat' with 2 parameters 
     io.sockets.emit('updatechat', socket.username, data); 
    }); 

    // when the client emits 'adduser', this listens and executes 
    socket.on('adduser', function(username){ 
     // we store the username in the socket session for this client 
     socket.username = username; 
     // add the client's username to the global list 
     usernames[username] = username; 
     // echo to client they've connected 
     socket.emit('updatechat', 'SERVER', 'you have connected'); 
     // echo globally (all clients) that a person has connected 
     socket.broadcast.emit('updatechat', 'SERVER', username + ' has connected'); 
     // update the list of users in chat, client-side 
     io.sockets.emit('updateusers', usernames); 
    }); 

    // when the user disconnects.. perform this 
    socket.on('disconnect', function(){ 
     // remove the username from global usernames list 
     delete usernames[socket.username]; 
     // update list of users in chat, client-side 
     io.sockets.emit('updateusers', usernames); 
     // echo globally that this client has left 
     socket.broadcast.emit('updatechat', 'SERVER', socket.username + ' has disconnected'); 
    }); 
}); 

obove 코드는 동일한 코드는 익스프레스 3.x를위한 몇 가지 변화가 answer of Riwels를 사용하여 제작 된 webtutorial 같이이다 : 여기

는 app.js의 코드입니다.

이

<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> 
    var socket = io.connect('http://localhost:8080'); 

    // on connection to server, ask for user's name with an anonymous callback 
    socket.on('connect', function(){ 
     // call the server-side function 'adduser' and send one parameter (value of prompt) 
     socket.emit('adduser', prompt("What's your name?")); 
    }); 

    // listener, whenever the server emits 'updatechat', this updates the chat body 
    socket.on('updatechat', function (username, data) { 
     $('#conversation').append('<b>'+username + ':</b> ' + data + '<br>'); 
    }); 

    // listener, whenever the server emits 'updateusers', this updates the username list 
    socket.on('updateusers', function(data) { 
     $('#users').empty(); 
     $.each(data, function(key, value) { 
      $('#users').append('<div>' + key + '</div>'); 
     }); 
    }); 

    // on load of page 
    $(function(){ 
     // when the client clicks SEND 
     $('#datasend').click(function() { 
      var message = $('#data').val(); 
      $('#data').val(''); 
      // tell server to execute 'sendchat' and send along one parameter 
      socket.emit('sendchat', message); 
     }); 

     // when the client hits ENTER on their keyboard 
     $('#data').keypress(function(e) { 
      if(e.which == 13) { 
       $(this).blur(); 
       $('#datasend').focus().click(); 
      } 
     }); 
    }); 

</script> 
<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:300px;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> 

Socket.io 잘 시작하지만 응용 프로그램이 아직 메시지를 표시하지 않습니다 여기

은 index.html을의 코드입니다. 이것을 작동시킬 수 있습니까?

Answer 1

index.html에 버그가있었습니다. app.js에서와 마찬가지로 포트를 변경하는 것을 잊었습니다. 이제 완벽하게 작동합니다. index.html을의

작업 코드 :

<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> 
    var socket = io.connect('http://localhost:8000'); 

    // on connection to server, ask for user's name with an anonymous callback 
    socket.on('connect', function(){ 
     // call the server-side function 'adduser' and send one parameter (value of prompt) 
     socket.emit('adduser', prompt("What's your name?")); 
    }); 

    // listener, whenever the server emits 'updatechat', this updates the chat body 
    socket.on('updatechat', function (username, data) { 
     $('#conversation').append('<b>'+username + ':</b> ' + data + '<br>'); 
    }); 

    // listener, whenever the server emits 'updateusers', this updates the username list 
    socket.on('updateusers', function(data) { 
     $('#users').empty(); 
     $.each(data, function(key, value) { 
      $('#users').append('<div>' + key + '</div>'); 
     }); 
    }); 

    // on load of page 
    $(function(){ 
     // when the client clicks SEND 
     $('#datasend').click(function() { 
      var message = $('#data').val(); 
      $('#data').val(''); 
      // tell server to execute 'sendchat' and send along one parameter 
      socket.emit('sendchat', message); 
     }); 

     // when the client hits ENTER on their keyboard 
     $('#data').keypress(function(e) { 
      if(e.which == 13) { 
       $(this).blur(); 
       $('#datasend').focus().click(); 
      } 
     }); 
    }); 

</script> 
<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:300px;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>