package.json
{
"name": "socket-chat-example",
"version": "0.0.1",
"description": "my first socket.io app",
"dependencies": {
"express": "^4.17.1",
"socket.io": "^2.3.0"
}
}
文件目录
1575857003(1).png
node 服务端 app.js
var http = require("http").createServer();
var io = require("socket.io")(http);
let onlineUsers = {};
let onlineCount = 0;
let speakvallist = [];
io.on("connection", function(socket) {
socket.on("login", function(obj) {
//将新加入用户的唯一标识当作socket的名称，后面退出的时候会用到
socket.name = obj.userid;
//检查在线列表，如果不在里面就加入
if (!onlineUsers.hasOwnProperty(obj.userid)) {
onlineUsers[obj.userid] = obj.username;
//在线人数+1
onlineCount++;
}
//向所有客户端广播用户加入
io.emit("login", {
onlineUsers: onlineUsers,
user: obj,
onlineCount: onlineCount
});
console.log(obj.username + "加入了聊天室");
});
socket.on("disconnect", function() {
onlineCount--;
// console.log(socket.name, !onlineUsers.hasOwnProperty(socket.name));
if (onlineUsers.hasOwnProperty(socket.name)) {
var obj = { userid: socket.name, username: onlineUsers[socket.name] };
// console.log(onlineUsers[socket.name] + "断开链接");
delete onlineUsers[socket.name];
io.emit("logout", {
onlineUsers: onlineUsers,
user: obj,
onlineCount: onlineCount
});
}
console.log(socket.name + "断开链接");
});
socket.on("speak", a => {
speakvallist.push(a);
console.log(socket.name);
io.emit("speak", {
username: onlineUsers[socket.name],
speak: a
});
});
});
http.listen(4000, function() {
console.log("listening on *:4000");
});
客户端 index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="email=no" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" name="viewport" />
<title>T</title>
<script src="./socket-io/socket.io.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#room {
display: none;
}
ul {
list-style: none;
}
.speak>li {
margin-bottom: 12px;
color: rgb(233, 67, 136);
font-size: 12px;
}
.speak>li:nth-child(2n) {
background-color: #eee;
}
.speak>li>p {
color: #333;
font-size: 16px;
}
</style>
</head>
<body>
<div id="loginbox">
<div style="width:260px;margin:200px auto;">
请先输入你在聊天室的昵称
<br />
<br />
<input type="text" style="width:180px;" placeholder="请输入用户名" id="login" />
<input type="button" style="width:50px;" value="提交" onclick="usernameSubmit()" />
</div>
</div>
<div id="room">
<header>
聊天室 在线人数 <span id="number"></span> 姓名
<span id="username"></span>
</header>
<ul class="record" style="margin-bottom:80px"></ul>
<div style="width:260px;margin:80px auto;">
<br />
<br />
<p>聊天记录</p>
<ul class="speak"></ul>
<input type="text" style="width:180px;" placeholder="聊天" id="speak" />
<input type="button" style="width:50px;" value="提交" onclick="useresc()" />
</div>
</div>
<script>
socket = io.connect("http://localhost:4000");
function usernameSubmit() {
let content = document.querySelector("#login").value;
socket.on("login", o => {
document.querySelector("#username").innerHTML = o.user.username;
document.querySelector("#loginbox").style.display = "none";
document.querySelector("#room").style.display = "block";
});
//告诉服务器端有用户登录
socket.emit("login", {
userid: new Date(),
username: content
});
//监听新用户登录
}
socket.on("login", function(o) {
updateSysMsg(o, "login");
});
socket.on("logout", function(o) {
updateSysMsg(o, "logout");
});
let record = document.querySelector(".record");
let number = document.querySelector("#number");
function updateSysMsg(v, login) {
console.log(v);
let li = document.createElement("li");
if (login == "login") {
li.innerHTML = v.user.username + "加入了聊天室";
} else {
li.innerHTML = v.user.username + "退出了聊天室";
}
record.appendChild(li);
number.innerHTML = v.onlineCount;
}
let speakval = document.querySelector("#speak");
let speakul = document.querySelector(".speak");
function useresc() {
socket.emit("speak", speakval.value);
console.log(speakval.value);
}
socket.on("speak", speak => {
// speak
console.log(speak);
let li = document.createElement("li");
li.innerHTML = `${speak.username}<p>${speak.speak}</p>`;
speakul.appendChild(li);
});
</script>
</body>
</html>
