前言
这个小Demo是在复习原生JavaScript时一道练习的高级版，本来是想着照着原来做出来就好了，但觉得好像有没什么意思。由于之前有了解过WebSocket的通讯原理，还有最近在学习node.js，结合网上的一些资料，于是就把这道题升级一下。
效果
代码
服务端代码
// 加载 koa2 相关依赖
let Koa = require("koa2");
let WebSocket = require("koa-websocket");
// 实例化 WebSocket, 并创建接收消息数组
let app = WebSocket(new Koa());
let ctxs = [];
// 简单的消息收发
app.ws.use((ctx, next) => {
// 接收到的消息
ctxs.push(ctx);
ctx.websocket.on("message", (message) => {
console.log(message);
for(let i = 0; i < ctxs.length; i++) {
if (ctx == ctxs[i]) continue;
ctxs[i].websocket.send(message);
}
});
ctx.websocket.on("close", (message) => {
// 关闭时清除相关数据，防止出错
let index = ctxs.indexOf(ctx);
ctxs.splice(index, 1);
});
});
// 端口监听
app.listen(3000);
html 代码
ps : 创建两个html文件，代码内容都相同。就可以实现两个人之间的聊天了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>前端切图工程师</title>
<style>
.chat-room
{
width: 250px;
height: 500px;
padding: 10px;
border: 1px solid #ddd;
position: relative;
margin: 0 auto;
overflow: hidden;
}
.chat-content
{
width: 100%;
height: 450px;
overflow:auto;
}
.chat-op
{
position: absolute;
bottom: 0;
left: 0;
}
.me-item
{
text-align: right;
}
</style>
</head>
<body>
<div class="chat-room">
<div class="chat-content" id="chatContent">
</div>
<div class="chat-op">
<input type="text" id="content" />
<input type="button" value="发送" id="send" />
<input type="button" value="关闭" id="close" />
</div>
</div>
</body>
<script type="text/javascript">
var chatContent = document.getElementById('chatContent');
var oContent = document.getElementById('content');
/* 封装 WebSocket 实例化的方法 */
var CreateWebSocket = (function () {
return function (urlValue) {
if(window.WebSocket) return new WebSocket(urlValue);
if(window.MozWebSocket) return new MozWebSocket(urlValue);
return false;
}
})();
//实例化 WebSocket 并且连接服务器
var webSocket = CreateWebSocket("ws://localhost:3000");
/* 接收到服务端的消息时 */
webSocket.onmessage = function (msg) {
console.log("接收到新消息:" + msg.data);
let oFriendItem = document.createElement('div');
oFriendItem.className = 'friedns-item';
let oSpan = document.createElement('span');
oSpan.className = 'friedns';
let message = document.createTextNode(msg.data);
oSpan.appendChild(message);
oFriendItem.appendChild(oSpan);
chatContent.appendChild(oFriendItem);
// 聊天内容置底部
chatContent.scrollTop = chatContent.scrollHeight;
};
// 关闭时
webSocket.onclose = function () {
console.log("关闭连接");
};
// 发送消息
document.getElementById("send").onclick = function () {
var str = document.getElementById("content").value;
let oMeItem = document.createElement('div');
oMeItem.className = 'me-item';
let oSpan = document.createElement('span');
oSpan.className = 'me';
let msg = document.createTextNode(oContent.value);
oSpan.appendChild(msg);
oMeItem.appendChild(oSpan);
chatContent.appendChild(oMeItem);
oContent.value = '';
// 聊天内容置底部
chatContent.scrollTop = chatContent.scrollHeight;
webSocket.send(str);
};
//关闭
document.getElementById("close").addEventListener("click", function () {
webSocket.close();
});
</script>
</html>
参考资料：
感谢博客园的大神，https://www.cnblogs.com/lovling/p/7440360.html