Question

基本聊天应用无法正常工作。想要使用socket-io实现基本聊天应用。在发送消息之后，用户断开连接并再次连接，这导致擦除先前发送或接收的消息。以下是js和html中使用的函数。

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/',function(req,res){
res.sendFile(__dirname + '/chat_home.html');
});

io.on('connection', function(socket){
console.log('a user connected');
socket.on('disconnect', function(){
console.log('user disconnected');
});
//console.log('chat started');

socket.on('chat message',function(msg){
//io.emit('some event', { for: 'everyone' });
console.log('message: ' + msg);
io.emit('chat message', msg, { for: 'everyone' });

});
});
//io.on('connection', function(socket){

//});
http.listen(3000, function(){
console.log('listening on *:3000'); 
});

<!doctype html>
<html>
<head>
<title>Socket.IO chat</title>
<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();

        function sendMessage() {
            var msg = document.getElementById('m');

            socket.emit('chat message', msg.value);
            msg.value = '';
            var ul = document.getElementById("msg.value");
            var li = document.createElement("li");
            li.appendChild(document.createTextNode(msg));
            ul.appendChild(li);

            //return false;
        }

        socket.on('chat message', function (msg) {
            var ul = document.getElementById("messages");
            var li = document.createElement("li");
            li.appendChild(document.createTextNode(msg));
            ul.appendChild(li);
            localStorage.msgs=ul.innerHTML;
        });

</script>
</head>

<body>
<ul id="messages"></ul>
<form action="" onsubmit="javascript:sendMessage();">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
</body>

</html>

Answer 1

Index.js

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

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

    /*io.on('connection', function(socket){
      console.log('a user connected');
    });
    */
    http.listen(3000, function(){
      console.log('listening on *:3000');
    });

    /* Socket io event to disconnect users */

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

    /* Code for print out the chat msg */
    /*
    io.on('connection', function(socket){
      socket.on('chat message', function(msg){
        console.log('message: ' + msg);
      });
    });

    In order to send an event to everyone, Socket.IO gives us the io.emit:

    io.emit('some event', { for: 'everyone' });
    If you want to send a message to everyone except for a certain socket, we have the broadcast flag:

    io.on('connection', function(socket){
      socket.broadcast.emit('hi');
    });
    In this case, for the sake of simplicity we’ll send the message to everyone, including the sender.
    */

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

的index.html

<!--If you restart the process (by hitting Control+C and running node index again) and refresh the page it should look like this: -->   
<!doctype html>
<html>
  <head>
    <title>Socket.IO 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>
    <h2><font color="red">Aman Chat App</font></h2>
    <form action="">
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>
    <!--<script src="/socket.io/socket.io.js"></script>
    <script>
      var socket = io();
    </script>-->
    <script src="/socket.io/socket.io.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;
      });
    </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>

的package.json

{
  "name": "aman-chat-app",
  "version": "0.0.1",
  "description": "my first real time chat app",
  "main": "index.js",
  "scripts": {
    "test": "npm start"
  },
  "author": "aman kumar",
  "license": "MIT",
  "dependencies": {
    "express": "^4.10.2",
    "socket.io": "^1.4.6"
  }
}

使用socket-io制作基本的聊天应用程序

1 个答案: