Socket.io教程: 基于Express的多人聊天室的简单设计与实现

多人聊天室的简单设计概述

• 相当于实现一个简单的群聊功能demo
• 用户输入自己的名称进入聊天室
• 多人即时畅聊

后端设计

var express = require('express');
var app = express();

app.set('view engine','ejs');
app.use(express.static('public'));

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

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

app.get('/chat',function(req,res){
    var name=req.query.name;
    res.render('chat',{
        name:name
    });
})

io.on('connection',function(socket){
    console.log('有个客户端连接了');
    socket.on('message',function(data){
        io.emit('message',data);  // 全部广播
    })
})

前端设计

首页：输入用户名 views/index.ejs

<script src="jquery-1.11.3.min.js"></script>

<div class="box">
    <input type="text" placeholder="请输入您的大名" id="name"/> <button class="login">进入聊天室</button>
</div>

<script>
    $(function(){
        $('.login').click(function(){
                var name=$('#name').val();
                if(name){
                    location.href='/chat?name='+name;
                }else{
                    alert('您的大名不对');
                }
        })
    })
</script>

聊天室：畅聊 views/chat.ejs

<script src="/socket.io/socket.io.js"></script>
<script src="jquery-1.11.3.min.js"></script>

<h2>小小聊天室</h2>

<div class="chat" style="overflow-x: auto">
    <ul class="list">
    </ul>
   <p class="footer"></p>
</div>

<div class="send">
    <input type="text" id="msg"/>
    <input type="button" id="send" value="发送"/>
</div>

<script>
    $(function(){
        var socket=io.connect('http://localhost:3000');
        socket.on('message',function(data){   /*监听服务器广播的数据*/
            $(".list").append(`<li><strong>${data.name}:</strong> ${data.msg}</li>`);
            $('#msg').val('');
           $('.footer').get(0).scrollIntoView(true);
        })

        //发送数据
        $('#send').click(function(){
            socket.emit('message',{
                msg:$('#msg').val(),
                name:'<%=name%>'
            })
        })
    })
</script>