WeSocket实现即时通讯
前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#kuang {
text-align: center;
margin-top: 200px;
}
#mess {
text-align: center
}
.value {
width: 200px;
height: 200px;
border: 1px solid;
text-align: center;
line-height: 200px;
display: inline-block;
cursor: pointer;
}
</style>
</head>
<body>
<div id="mess">正在连接...</div>
<div id="kuang">
<span style="display: block">点击发送</span>
<div class="value">1111111111111111111</div>
<div class="value">2222222222222222222</div>
<div class="value">3333333333333333333</div>
</div>
<script>
var mess = document.getElementById("mess");
if (window.WebSocket) {
var ws = new WebSocket('ws://localhost:8080');
ws.onopen = function (e) {
console.log("连接服务器成功");
ws.send("开始"); //向后台发送数据
}
ws.onclose = function (e) {
console.log("服务器关闭"); //当链接关闭的时候触发
}
ws.onerror = function () {
console.log("连接出错"); //错误情况触发
}
ws.onmessage = function (e) {
//后台返回消息的时候触发
console.log(e.data);
mess.innerHTML = "连接成功"
document.querySelector("#kuang").onclick = function (e) {
if (e.target.nodeName.toLowerCase() == 'div') {
ws.send(e.target.innerHTML);
}
}
}
}
</script>
</body>
</html>
后台node代码
第一种通过ws模块实现
安装 ws cnpm install ws --save
参考文档
代码是
var WebSocket = require('ws');
console.log('开始建立连接...');
var wss = new WebSocket.Server({
port: 8080 });
wss.on('connection', function connection(ws) {
ws.on('message', function incoming(message) {
ws.send(message);
console.log("收到的信息为:" + message);
});
ws.on("close", function (code, reason) {
console.log("关闭连接")
});
ws.on("error", function (code, reason) {
console.log("异常关闭")
});
});
console.log("WebSocket建立完毕");
第二种通过nodejs-websocket模块实现
安装 nodejs-websocket cnpm install nodejs-websocket --save
代码是
var wss = require("nodejs-websocket");
console.log("开始建立连接...")
var server = wss.createServer(function(ws){
ws.on("text", function (str) {
console.log("收到的信息为:"+str)
ws.send(str)
})
ws.on("close", function (code, reason) {
console.log("关闭连接")
});
ws.on("error", function (code, reason) {
console.log("异常关闭")
});
}).listen(8080)
console.log("WebSocket建立完毕")