服务端代码如下：
chart.js文件
const http = require('http');
const io = require('socket.io');
let httpServer = http.createServer(function(req, res){
console.log("http创建成功");
});
httpServer.listen(8080);
let wsServer = io.listen(httpServer);
let sockList = [];
wsServer.on('connection', sock=>{
sockList.push(sock);
console.log("连接成功");
sock.on('login_ret', (name, pass)=>{
sock.emit('login_ret', {code: '0', user: name, msg: "登录成功"});
});
sock.on('reg_ret', (name, pass)=>{
sock.emit('reg_ret', {code: '0', msg: "注册成功"});
});
// 消息通知
sock.on('message_ret', (text, user)=>{
sockList.forEach(function(item) {
item != sock && item.emit("message_ret", {
code: "0", user: user, msg: text
});
});
});
// 离线
sock.on('disconnect', ()=>{
sockList = sockList.filter(function(item){
return item != sock;
});
});
});
char.html
页面代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>chart window</title>
<script src="http://localhost:8080/socket.io/socket.io.js"></script>
</head>
<style>
.chart_contain {
width: 100%;
height: 70%;
display: none;
}
.chart_content {
width: 100%;
height: 400px;
overflow: scroll;
}
.left {
float: left;
clear: both;
background-color: chartreuse;
}
.right {
float: right;
clear: both;
background-color: white;
}
.send_content {
width: 100%;
height: 100px;
}
</style>
<body>
<form>
<label for="userName">用户名：</label>
<input type="text" id="userName" name="userName">
<br>
<label for="password">密码：</label>
<input type="password" id="password" name="password">
<br>
<input type="button" id="regBtn" value="注册">
<input type="button" id="loginBtn" value="登录">
</form>
<!-- 聊天界面 -->
<div class="chart_contain">
<div class="chart_content">
<!-- todo -->
</div>
<div class="chart_footer">
<textarea class="send_content"></textarea>
<button class="send_btn">发送</button>
</div>
</div>
<script>
var form = document.getElementsByTagName("form")[0];
var user = document.getElementById("userName");
var password = document.getElementById("password");
var regBtn = document.getElementById("regBtn");
var loginBtn = document.getElementById("loginBtn");
var content = document.getElementsByClassName("chart_contain")[0];
var sendBtn = document.getElementsByClassName("send_btn")[0];
var text = document.getElementsByClassName("send_content")[0];
var chart = document.getElementsByClassName("chart_content")[0];
var userName, password;
// 链接
var sock = io.connect("ws://localhost:8080/");
// 注册请求
regBtn.onclick = function() {
var name = user.value;
var pass = password.value;
sock.emit("reg_ret", name, pass);
};
// 登录请求
loginBtn.onclick = function() {
var name = user.value;
var pass = password.value;
sock.emit("login_ret", name, pass);
};
// 发送消息
sendBtn.onclick = function() {
sock.emit("message_ret", text.value, userName);
render(userName, userName, text.value);
text.value = "";
};
// 注册
sock.on("reg_ret", function(res) {
if(res.code == "0") {
alert("注册成功，请登录");
}
});
// 登录
sock.on("login_ret", function(res) {
if(res.code == "0") {
userName = res.user;
alert("登录成功");
content.style.display = "block";
form.style.display = "none";
}
});
// 发消息
sock.on("message_ret", function(res) {
if(res.code == "0") {
render(userName, res.user, res.msg);
}
});
function render(userName, sender, msg) {
var classTag = userName === sender ? "left" : "right";
var node = document.createElement("div");
node.innerHTML = `<span>${sender}：<span>
<span>${msg}<span>`;
node.className = classTag;
chart.appendChild(node);
}
</script>
</body>
</html>
网友评论