1.项目目录:
- websocketChatRoom
- index.html(客户端)
- wsServer.js(服务器)
2.安装nodejs-websocket(https://www.npmjs.com/package/nodejs-websocket)
- npm install nodejs-websocket
3.index.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>websocket聊天室</title>
</head>
<body>
<input id="sendTxt" type="text">
<button id="send">send</button>
<script type="text/javascript">
var websocket = new WebSocket("ws://localhost:3000/");
websocket.onopen = function() {
console.log("websocket open");
// 发送消息放在这里
document.getElementById("send").onclick = function() {
var txt = document.getElementById("sendTxt").value;
if (txt) {
websocket.send(txt);
}
}
}
websocket.onclose = function() {
console.log("websocket close");
}
// 只接收字符串参数,所以在服务端相传对象过来可以用JSON先转换成字符串,然后在这边转成对象
websocket.onmessage = function(e) {
console.log(e.data);
var mes = JSON.parse(e.data);
showMessage(mes.data, mes.type);
}
// 显示消息函数
function showMessage(str, type) {
var div = document.createElement('div');
if (type == "enter") {
div.style.color = "red";
} else if (type == "message") {
div.style.color = "blue";
} else if (type == "leave") {
div.style.color = "green";
}
div.innerHTML = str;
document.body.appendChild(div);
}
</script>
</body>
</html>
4.wsServer.js
var ws = require("nodejs-websocket")
const PORT = 3000;
// 每进来一个客户端就记录一下
var clientCount = 0;
var server = ws.createServer(function(conn) {
console.log("New connection")
clientCount++;
conn.nickname = 'user' + clientCount;
let mes = {};
mes.type = "enter";
mes.data = conn.nickname + ' comes in'
broadcast(JSON.stringify(mes));
conn.on("text", function(str) {
console.log("Received " + str);
let mes = {};
mes.type = "message";
mes.data = conn.nickname + ' says: ' + str;
broadcast(JSON.stringify(mes));
})
conn.on("close", function(code, reason) {
console.log("Connection closed");
let mes = {};
mes.type = "leave";
mes.data = conn.nickname + ' left'
broadcast(JSON.stringify(mes));
})
conn.on("error", function(err) {
console.log("handle err");
console.log(err);
})
}).listen(PORT);
console.log("websocket server running on port: " + PORT);
function broadcast(str) {
server.connections.forEach(function(connection) {
connection.sendText(str);
})
}
5.运行结果
6.注意
- index.html里的onmessage回调函数要接收字符串作为参数,所以在服务端要用JSON转换成字符串,然后再在客户端转成对象!
- 这里的实现过程都是自己写的,可以借助socket.io来实现,它可以发送任何类型的数据,不仅仅是字符串,而且可以自定义事件