Node.js部分（服务端）
var express=require('express')
var app=express()
var server=require('http').createServer(app)
var io=require('socket.io')(server)
app.use(express.static(__dirname+'/public'))
//设置允许跨域
app.all('*', function (req, res, next) {
res.header("Access-Control-Allow-Credentials", true)
res.header("Access-Control-Allow-Origin", "*")
res.header("Access-Control-Allow-Headers", "X-Requested-With")
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS")
res.header("X-Powered-By", ' 3.2.1')
res.header("Content-Type", "application/json;charset=utf-8")
next()
})
//放用户
const users=[]
io.on('connection',function(socket){
console.log("新用户加入房间");
//监听Login事件
socket.on('login',(data)=>{
console.log(data);
//放数据,顺便增加唯一id
users.push({...data,id:socket.id})
console.log('id是'+socket.id);
//所有人广播
io.emit('loginback',{...data,id:socket.id})
})
socket.on('client',data2=>{
console.log(data2.value);
data2.users=users.find(u=>u.id==socket.id)
console.log(data2.users);
socket.broadcast.emit('sendmes',data2)
})
})
server.listen(3000,()=>{
console.log('http://127.0.0.1:3000');
})
前端部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Socket聊天室</title>
<style type="text/css">
/**输入框样式*/
.text * {
margin: 0;
padding: 0;
}
#main {
text-align: center;
}
#showmes {
position: relative;
background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201209%2F08%2F20120908134318_YVAwx.jpeg&refer=http%3A%2F%2Fcdn.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626261869&t=964bbb79e059f74901698cdd5f6de691) no-repeat;
background-size: 100% 110%;
margin: auto;
width: 600px;
height: 600px;
overflow: hidden;
overflow-y: scroll;
}
/**别人气泡*/
.leftspan2 {
float: left;
color: grey;
font-weight: 1000;
position: absolute;
top: -18px;
font-size: 3px;
left: 25px;
}
.leftspan {
color: white;
background-color: #635f5fec;
padding: 5px 8px;
font-size: 14px;
float: left;
position: relative;
border-radius: 4px;
margin-left: 25px;
margin-right: 5px;
}
.leftspan::after {
content: '';
border: 8px solid #ffffff00;
border-right: 8px solid #635f5fec;
;
position: absolute;
top: 6px;
left: -16px;
}
/*自己气泡**/
.pp {
width: 100%;
position: relative;
min-height: 20px;
float: right;
margin-bottom: 15px;
}
.rightspan2 {
float: right;
color: grey;
font-weight: 1000;
position: absolute;
top: -18px;
font-size: 3px;
right: 15px;
}
.rightspan {
float: right;
position: relative;
color: rgb(2, 2, 2);
font-weight: 500;
background-color: #88e99d;
padding: 5px 8px;
font-size: 14px;
border-radius: 4px;
margin-left: 5px;
margin-right: 15px;
}
.rightspan::after {
content: '';
border: 8px solid #ffffff00;
border-left: 8px solid #88e99d;
;
position: absolute;
top: 6px;
right: -13px;
}
/**输入框*/
#text {
width: 500px;
height: 25px;
}
</style>
</head>
<body>
<div id="joinname">
<span>请输入加入的姓名</span> <input type="text" id="name"><button onclick="joinchat()">提交</button>
</div>
<div id="main" style="display: none;">
<h1>fanfan的聊天室</h1>
<div id="showmes">
</div>
<div class="inputtxt">
<input type="text" id="text"></input>
<button id="btn" onclick="sendmes()">发送</button>
</div>
</div>
<script src="/socket.io/socket.io.js"></script>
<script>
//全局变量
name = ''
var socket = io(); //连接聊天室的io服务器 io服务器的根地址
//连接进聊天室
function firstjoin() {
socket.on('hello', data => {
console.log('服务端发送的东西为：' + data);
})
}
function notnull() {
if (document.getElementById('text').value != '') {
return 1;
}
else {
return 0;
}
}
//自己发信息
function sendmes() {
if (notnull()) {
var mes = document.getElementById('text').value
var p = document.createElement('p');
var span = document.createElement('span')
var span2 = document.createElement('span')
span.innerHTML = mes;
span2.innerHTML = name;
span2.className = 'rightspan2'
span.className = 'rightspan'
p.className = 'pp'
p.appendChild(span2)
p.appendChild(span)
document.getElementById('showmes').appendChild(p)
socket.emit('client', {'value':document.getElementById('text').value,'name':name})
document.getElementById('text').value = ''
document.getElementById("showmes").scrollTop += document.getElementById("showmes").offsetHeight;
}
}
//收到别人发的信息
socket.on('sendmes', data => {
console.log(data);
var p = document.createElement('p');
var span = document.createElement('span');
var span2 = document.createElement('span');
span.className = 'leftspan'
console.log('姓名是'+data.users.name);
span2.innerHTML = data.users.name
span2.className = 'leftspan2'
span.innerHTML = data.value;
p.appendChild(span2)
p.appendChild(span)
p.className = 'pp'
document.getElementById('showmes').appendChild(p)
document.getElementById("showmes").scrollTop += document.getElementById("showmes").offsetHeight;
})
//加入聊天室提醒
function joinchat() {
if (document.getElementById('name').value.length >= 1 && document.getElementById('name').value.length <= 6) {
//加入盒子隐藏 聊天盒子显示
document.getElementById('main').style.display='block'
document.getElementById('joinname').style.display='none'
name=document.getElementById('name').value
socket.emit('login', { 'name': document.getElementById('name').value })
}
}
socket.on('loginback', data => {
var p = document.createElement('p');
p.innerHTML = data.name + '加入了房间';
p.style.color = 'grey'
p.style.fontWeight = '1000'
p.style.textAlign = 'center'
p.style.fontSize = '6px'
document.getElementById('showmes').appendChild(p)
})
//回车发送消息
document.onkeydown = function (e) {
console.log('1');
var ev = document.all ? window.event : e;
if (ev.keyCode == 13) {
sendmes();
}
}
</script>
</body>
</html>
每次进入页面先输入自己的姓名才能进入聊天室 每个客户端对应自己独特的socket id来获取发送消息的名称 给回车绑定事件，每次回车发送 可以实现多人在线实时聊天，且有自己对应的名称 自己发送的消息和收到的消息进行区分
