node.js制作简单的聊天室
效果图
客户端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrap {
width: 400px;
border: 1px #ccc solid;
margin: 100px auto;
}
.show {
width: 400px;
height: 400px;
overflow: auto;
background-color: #999;
}
.show div {
overflow: hidden;
margin: 10px;
}
.show div span {
word-wrap: break-word;
padding: 10px 10px;
line-height: 20px;
overflow: hidden;
max-width: 350px;
border-radius: 10px;
}
.left {
float: left;
background-color: lightblue;
}
.right {
background-color: lightpink;
float: right;
}
.inp {
width: 320px;
height: 20px;
outline: none;
margin: 10px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="show">
</div>
<input type="text" class="inp">
<button class="btn">发送</button>
</div>
<script src="socket.io/socket.io.js"></script>
<script>
var time = Date.now();
var socket = io.connect("http://10.20.158.17:3000");
var inp = document.querySelector('.inp');
var show = document.querySelector('.show');
var btn = document.querySelector('.btn');
var timer = null
btn.onclick = function () {
if (!inp.value) {
return
}
var div = document.createElement('div');
div.innerHTML = '<span class="right">' + inp.value + '</span>'
show.appendChild(div);
socket.emit("sentToServer", {
msg: inp.value,
time: time
});
inp.value = '';
show.scrollTop = show.scrollHeight;
}
socket.on("sendToClient", message => {
var div2 = document.createElement('div');
if (message.time == time) {
return
} else {
div2.innerHTML = '<span class="left">' + message.msg + '</span>'
show.appendChild(div2);
}
show.scrollTop = show.scrollHeight;
});
</script>
</body>
</html>
服务端
const express = require('express');
const app = express();
const server = require('http').createServer(app);
const io = require('socket.io')(server);
// 设置静态文件托管目录
app.use(express.static('node_modules'));
let time = 0
//监听客户端链接,回调函数会传递本次链接的socket
io.on('connection', socket => {
// 监听客户端发送的信息
console.log(socket.id)
socket.on("sentToServer", message => {
// 给客户端返回信息
io.emit("sendToClient", message);
});
});
// 监听连接断开事件
server.listen(3000);