与express.io聊天

时间:2014-11-02 16:05:04

标签: node.js express socket.io express.io

我有两个文件,一个名为index.js,另一个名为index.html。 当我按下发送按钮时,消息不会出现

index.js文件的代码如下:

    app = require('express.io') ();
    app.http().io();

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


app.io.on('connection', function(socket){
socket.on('chat message',function(msg) {
 app.io.emit('chat message' ,msg)
 });
console.log('a user connected');
socket.on('disconnect', function(){
console.log('user disconnected');
});
});


app.listen(3000);

index.html文件的代码如下:

<!doctype html>
<html>
<head>
<title>Example of chat</title>

<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { font: 13px Helvetica, Arial; }
  form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
  form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
  form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px;   }
  #messages { list-style-type: none; margin: 0; padding: 0; }
  #messages li { padding: 5px 10px; }
  #messages li:nth-child(odd) { background: #eee; }
</style>
</head>
<body>
<ul id="messages"></ul>
 <form action="">
   <input id="m" autocomplete="off" /><button>Send</button>

 </form>
 <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
 <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
 <script>
     var socket = io();
     $('form').submit(function(){
     socket.emit('chat message', $('#m').val());
     $('#m').val('');
   return false;
   });
  socket.on('chat message', function(msg){
   $('#messages').append($('<li>').text(msg));
 });
</script>
 </body>
</html>

1 个答案:

答案 0 :(得分:0)

改为写

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

server.listen(3000);

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

io.on('connection', function (socket) {
  socket.on('chat message', function (data) {
    socket.broadcast.emit('chat message',data);
  });
});