服务器端 socket 功能
1、创建 服务器 绑定 IP + 端口 监听端口
2、监听 客户端的链接
3、监听 客户端发来的消息
4、把来自客户端的消息 广播给其他的在线客户端
5、监听 客户端的关闭
客户端 socket 功能
1、创建 客户端 socket
2、连接服务器 的 socket
3、发送消息 给 服务器
4、接收服务器发来的消息
5、监听 服务器 关闭 或者 异常
前端代码实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel='stylesheet' href='/stylesheets/style.css' />
<title>聊天室</title>
<style>
.box{
box-sizing: border-box;
width: 400px;
height: 300px;
margin: 0 auto;
}
#recv{
box-sizing: border-box;
width: 100%;
height: 500px;
border: 1px solid #ccc;
border-radius: 5px;
overflow-y: auto;
padding: 10px;
}
p{
margin: 0;
padding: 2px 0;
}
input{
width: 200px;
height: 30px;
box-sizing: border-box;
border: 1px solid #ccc;
outline: none;
border-radius: 5px;
padding-left: 10px;
}
</style>
</head>
<body>
<%- include("head")%>
<div class="box">
<h1>聊天室</h1>
<div id="recv"></div>
<input type="text" name="" id="texts">
<button id="send" data-name="<%-username%>">发送</button>
</div>
<script>
var inp = document.querySelector("#texts");
var btn = document.querySelector("#send");
var recv = document.querySelector("#recv");
var websocket = new WebSocket("ws:192.168.53.210:10086");
var usernsme = btn.getAttribute("data-name")
websocket.onopen = function () {
websocket.send(JSON.stringify({
user:usernsme,
txt: "我上线了",
}));
btn.onclick = function(){
if(!inp.value) return;
websocket.send(JSON.stringify({
user:usernsme,
txt: inp.value,
}));
inp.value = '';
}
}
websocket.onmessage = function (e) {
console.log(e.data)
recv.innerHTML += `<p>${JSON.parse(e.data).user}说:${JSON.parse(e.data).txt}</p>` ;
recv.scrollTop += recv.clientHeight;
}
websocket.onclose = function () {
console.log("websocket close");
}
</script>
</body>
</html>
服务器端代码:
var ws = require("ws");
var port = 10086;
const socket = ws.Server;
const webServer = new socket({ port });
console.log(`server start in ${port}`);
var userObjobj = {};
var count = 100;
var info = "WUHAN2002__";
var userObj = {};
webServer.on("connection", (socket) => {
count++;
var obj = {}
socket.name = info+count; // 后面删除
userObj[socket.name] = socket; //每登录都会存一个数据到 userObj
// 监听客户端发来的消息...
socket.on("message", (msg) => {
// socket.send(msg);
obj = {
user:JSON.parse(msg).user,
txt:JSON.parse(msg).txt,
}
boradcast(JSON.stringify(obj), socket);
});
// 监听客户端的关闭 socket
socket.on("close", function () {
obj.txt = "下线了"
boradcast(JSON.stringify(obj));
delete userObj[socket.name]; // 对象删除
})
});
// 广播
function boradcast(msg,socket){
for(var prop in userObj){
userObj[prop].send(msg);
}
}