铺垫一下基础知识,先把Websocket以及socket.io都了解好,为后续做铺垫,所以今天在昨天的基础上,着手做一个聊天室
实现一个简易聊天室
利用websocket,实现用户进入后显示进入人数,退出时显示已经退出~
在上一节的基础上,进行改动——点击发送后,将文本框的内容发送给server,接受数据后,再将数据通过div显示在界面,通过自建函数showMessage实现
<body>
<h1>聊天室——Websocket</h1>
<input type="text" id="sendTxt" />
<button id="sendb">发送</button>
<script type="text/javascript">
var ws = new WebSocket("ws://localhost:8080/"); // 设置服务器地址 //
// 添加div到页面
function showMessage(str) {
var div = document.createElement("div");
div.innerHTML = str;
document.body.appendChild(div);
}
ws.onopen = function () {
// onopen 连接触发 //
console.log("websocket open");
document.getElementById("sendb").onclick = function () {
var txt = document.getElementById("sendTxt").value;
if (txt) {
websocket.send(txt);
}
};
// document.getElementById("recv").innerHTML = "Connected";
// innerHTML 可以 获取 也可以 插入 //
};
ws.onclose = function () {
// onclose 断开触发 //
console.log("websocket close");
};
ws.onmessage = function (e) {
// onmessage 接收到信息触发 //
console.log(e.data);
// document.getElementById("recv").innerHTML = e.data;
// 添加函数,点击后添加div到对应位置
showMessage(e.data);
};
</script>
修改wsServer.js的内容
var ws = require("nodejs-websocket")
var PORT = 8080
var clientCount = 0
var server = ws.createServer(function (conn) {
//受到连接触发//
console.log('new connection');
// 客户端多1 加1
clientCount++
conn.nickname = 'user' + clientCount
// 函数实现客户进入并通知
broadcast(conn.nickname + '进入聊天室~')
conn.on("text", function (str) {
// 收到信息触发 接收 //
console.log("received" + str)
// conn.sendText(str) // 发送 数据 //
// 提示客户进入
broadcast(str)
})
conn.on("close", function (code, reason) {
// 断开连接触发 //
console.log("connection closed")
// 提示客户离开
broadcast(conn.nickname + '离开聊天室')
})
conn.on("error", function (err) {
// 出错触发 //
console.log("header err")
console.log(err)
})
}).listen(PORT)
console.log("websocket server listening on port" + PORT)
function broadcast(str) {
// 遍历取到的所有链接用createServer方法
server.connections.forEach(function (connection) {
connection.sendText(str)
})
}