1.先写服务端的代码
在服务端要先进行安装node环境，然后用npm install socket.io
要安装express框架
let http = require('http');
let fs = require('fs');
let ws = require('socket.io');
let express = require('express');
let app = express();//先进行express实例化
app.get('/',function(req,res){
let html = fs.readFileSync('./clients.html');//同步读取文件
res.end(html);
});
let server = http.createServer(app).listen(3001);//监听3001端口
let io = ws(server);//把scoket服务挂载到http服务器中,实例化
io.on('connection',function(socket){
console.log('有新用户进入房间');
scoket.on('message',function(mes){
console.log(mes);
io.emit('message',mes);//广播消息
})
})
2.客户端这边进行连接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>
聊天室的客户端
</h1>
<form action="">
<input type="text" name="" id="mes">
<input type="button" name="" id="btn" value="send">
</form>
<script src="http://wulv5.com/js/socket.io.min.js"></script>
<script>
//每一次打开客户端，就相当于连接了聊天室
let socket = io.connect('/');//连接聊天室的io服务器
let mes = document.getElementById('mes');
let btn = document.getElementById('btn');
let myMessage = '';
btn.onclick = function () {
let value = mes.value;
if(!value){ //当消息为空时，
return;
}
myMessage = value;
socket.send(value); //把消息发送到服务端
mes.value = '';//清空文本框
}
//当服务器广播消息时，触发message事件，消息内容在回调函数中
socket.on('message',function (mm) {
let p = document.createElement('p');
p.innerHTML = mm;
if(myMessage === mm){
p.style.cssText = 'color:red;margin-left:10%';
}
document.body.appendChild(p);
})
</script>
</body>
</html>