首先 需要搭建node 环境
然后 我们创建html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>聊天室系统</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="http://wulv5.com/js/socket.io.min.js"></script>
</head>
<body>
<div>
<h1>这是一个聊天室系统</h1>
<input type="text" id="mes">
<input type="button" id="btn" value="发送">
<p></p>
</div>
<script>
//TODO
var socket = io.connect("/");
var mes = document.getElementById("mes"),
btn = document.getElementById("btn");
btn.onclick = function(){
var val = mes.value; //将输入框内容获取出来
socket.send(val); //将获取到输入框内的消息发送到远程socket服务器中
mes.value = ""; //将输入框内容设置为空
};
//监听服务端发送的信息
socket.on("message",function(mes){
var p = document.createElement("p"); //获取到p标签
p.innerText = "信息 : "+mes.mes + "-- ID : "+mes.id; //将p标签的内容设置为获取到的信息
document.body.appendChild(p); //向body元素中追加一个p
})
</script>
</body>
</html>
然后编写server.js服务端页面
在引入socket.io的时候 需要先用npm下载socket.io包 : npm i socket.io
var http = require("http"); //Node 创建一个模块
const fs = require('fs'); //引入文件系统模块
var ws = require("socket.io"); //引入socket模块
var server = http.createServer(function (req, res) {
var html = fs.readFileSync("./index.html");
//连接服务器之后 执行语句
res.end(html);
}).listen("3000"); //创建服务器实例
var io = ws(server); //将socket服务挂载到http服务中
//socket客户端实例
io.on("connection",function(socket){
var rond = Math.random();
console.log("有新用户进来了 : "+ rond);
//在监听到客户端消息之后要做的事情
socket.on("message",function(mes){
console.log(mes);
mes = {"mes":mes,id : rond};
//广播消息 主动触发事件,将获取到的消息发送出去 让客户端可以通过方法捕获到
io.emit("message",mes);
}) //监听每一个socket客户端实例发送消息
}); //监听 连接事件