socket.io简单例子
参考：
https://www.w3cschool.cn/socket/socket-odxe2egl.html
https://socket.io/docs/
安装socket.io
npm install --save socket.io
服务器端：新建index.js后，并运行node index.js启动。
var app=require('http').createServer();
var io=require('socket.io')(app);
var clientcount=0;//当前在线人数
io.on('connection',function(socket){
++clientcount;
socket.username='未命名'
发送消息给客户端
io.emit('online',clientcount);
socket.on('username',function(data){
socket.username=data;
io.emit('enter',socket.username+'进来了')
io.emit('online',clientcount);
})
//监听客户端发送的消息
socket.on('message',function(str){
//发送客户端消息
io.emit('message',socket.username+'说：'+str)
})
//断开连接
socket.on('disconnect',function(){
--clientcount;
io.emit('leave',socket.username+'已经离开了')
io.emit('online',clientcount);
})
//当前在线总人数
})
app.listen(3000)
客户端：新建user.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>
<style type="text/css">
#ask-content{
display: none;
}
#chat-room{
border: 1px solid #f2efef;
border-radius: 20px;
padding: 20px;
}
#send-txt,#ask-name{
padding: 20px;
display: flex;
}
button{
font-size: 12px;
background: #0aa4d7;
border: none;
color: white;
border-radius: 4px;
padding: 3px 15px;
}
</style>
</head>
<body>
<h2>临时聊天室</h2>
<div id="ask-content">
<div id="username">
</div>
<div id="chat-room" class="content">
</div>
<div id='send-txt'>
请输入发送消息： <input id="sendTx" type="text" name="title"><br/>
<button id="but" onclick="SubVal()">提交</button>
</div>
</div>
<div id="ask-name">
请输入你名称：<input id="sendname" type="text" name="name"><br/>
<button id="namebut">提交</button>
</div>
<script>
var sock=io("ws://localhost:3000");
//输入用户名进入聊天室聊天
document.getElementById('namebut').onclick=function(){
let txt=document.getElementById('sendname').value;
if(txt){
sock.emit('username',txt);
document.getElementById('ask-content').style.display='block';
document.getElementById('ask-name').style.display='none';
sock.on('online',function(data){
document.getElementById('username').innerHTML='当前用户名为:'+txt+',当前在线人数'+data;
})
// document.getElementById('username').innerHTML='当前用户名为:'+txt+',当前在线人数'+count;
}else{
alert('请输入你名称');
return;
}
}
function SubVal(){
var txt=document.getElementById('sendTx').value;
if(txt){
sock.emit('message',txt);
document.getElementById('sendTx').value='';
}
}
sock.on('enter',function(data){
showMessage('enter',data);
})
sock.on('message',function(data){
showMessage('message',data)
})
sock.on('leave',function(data){
showMessage('leave',data)
})
function showMessage(type,msg){
let chatRoomEle=document.getElementById("chat-room")
let divEle=document.createElement("div");
divEle.innerHTML=msg;
if(type=='enter'){
divEle.style.color="blue";
}else if(type=="leave"){
divEle.style.color="red";
}else{
divEle.style.color="green";
}
chatRoomEle.appendChild(divEle)
}
</script>
</body>
</html>
运行结果：
打开浏览器输入用户名称，则该用户进入聊天室，此时会提示“xx进来了”，通过文本框，输入发送消息。
若此时又有用户进来，则同理。若离开，则提示“xx离开了”，若不理解，可以查看socket.io例子 https://socket.io/demos/chat/
