多人聊天室的简单设计概述
- 相当于实现一个简单的群聊功能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>