需求如下
1、在聊天界面中建立websocket连接.
2、一个客户端发消息, 服务端接收消息后把消息分发给所有客户端.
3、客户端接收服务端发回来的消息, 打印.(显示在聊天记录区域)
4、提示当前在线人数.
（1）服务端中一旦接收到客户端连接, 维护一个全局变量count, 记录当前在线人数(count++)
（2）当服务端发现有客户端断开连接就需要让（count–）
5、无论count如何变化, 只要count有变化就需要将count实时发给所有客户端.
6、客户端接收服务端发过来的消息countmsg. 将人数实时显示在页面中.
7、登录, 发消息时携带头像/昵称等参数.
完整demo
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./styles/chart.css">
<link rel="stylesheet" href="./styles/normalize.css">
<link rel="stylesheet" href="./styles/reset.css">
</head>
<body>
<div id="chart-container">
<div class="chart-user-list" id="chart-user-list">
<div id="userinfo" class="user-item">
<img src="images/avatar/15.jpg" alt="">
未知名
</div>
</div>
<div class="chart-main-area">
<div class="chart-main-title">
<h1>微信聊天室(<span id="userNumber"></span>人)-<span id="currentUser"></span></h1>
</div>
<div class="chart-list" id="chat-list">
<!--
<div class="user-logined" id="user-logined"><span id="logined-user"></span>上线了</div>
<div class="chart-item">
<div class="user-face"><img src="images/avatar/11.jpg" alt=""></div>
<div class="user-message">111</div>
</div>
-->
</div>
<div class="chart-form">
<div><textarea class="chart-form-message" id="message"></textarea></div>
<div><input type="button" id="send" class="chart-form-send" value="发表"></div>
</div>
</div>
</div>
</body>
<script src="/socket.io/socket.io.js"></script>
<script>
let socket=io()
console.log(socket);
socket.on('news',(data)=>{
console.log(data);
let div=document.createElement('div')
div.className='chart-item'
div.innerHTML=`<div class="user-face">
<img src="images/avatar/${data.avatar}" alt="">
</div>
<div class="user-name">${data.name}</div>
<div class="user-message">${data.msg}</div>`
let chatlist=document.getElementById('chat-list')
chatlist.appendChild(div)
chatlist.scrollTop=chatlist.scrollHeight
})
send.addEventListener('click',()=>{
let msg=message.value.trim()
console.log(msg);
if(msg.length<1 || msg.length>25) return
socket.emit('news',{msg,name,avatar})
message.value=''
})
socket.on('countmsg',(data)=>{
console.log(data);
userNumber.innerHTML=data
})
let search=decodeURI(location.search)
console.log(search);
if(!search){
location.href='login.html'
}
let name=search.split('&')[0].split('=')[1]
let avatar=search.split('&')[1].split('=')[1]
console.log(name,avatar);
userinfo.innerHTML=`<img src="images/avatar/${avatar}" alt="">
${name}`
</script>
</html>
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./styles/chart.css">
<link rel="stylesheet" href="./styles/normalize.css">
<link rel="stylesheet" href="./styles/reset.css">
</head>
<body>
<div id="login-container">
<div class="login-title">微信聊天室</div>
<div class="login-user-icon">
<img src="images/login.png" alt="">
</div>
<div>
<input type="text" id="username" class="login-item login-username" placeholder="请输入聊天昵称">
</div>
<div>
<input type="button" id="login" class="login-item login-button" value="登录">
</div>
</div>
</body>
<script>
login.addEventListener('click',()=>{
let name=username.value
console.log(name);
let avatar=Math.floor(Math.random()*100)+'.jpg'
location.href=`index.html?name=${name}&avatar=${avatar}`
})
</script>
</html>
app.js
const { Socket } = require('socket.io');
const express=require('express')
const app=express()
const server=require('http').Server(app)
const io=require('socket.io')(server)
server.listen(3000,()=>{
console.log('server is Running');
})
app.use(express.static('./public'))
let count=0
io.on('connection',(socket)=>{
console.log('有人进来了',socket.id);
count++
io.emit('countmsg',count)
socket.on('disconnect',()=>{
count--
io.emit('countmsg',count)
console.log('有人离开了');
})
socket.on('news',(data)=>{
console.log(`${socket.id} 说：${data}`);
console.log(data);
io.emit('news',data)
})
})
|