效果图
比较简陋,但是基本的功能能看到效果
准备工作:
- 本机需要有node环境
- 新建一个文件夹src,进入src 初始化一个package.josn。
- 使用npm i nodejs-websocket -S安装包,-S安装在dependencies:
"dependencies": {
"loadsh": "0.0.4",
"nodejs-websocket": "^1.7.2"
},
服务端实现
var ws = require("nodejs-websocket");
console.log("开始建立连接...")
var server = ws.createServer((conn) => {
conn.on("text", (str) => {
setInterval(()=>{
conn.sendText("轮训的返回值:"+new Date().toString())
},2000)
})
conn.on("close", ()=>{
console.log("关闭连接")
});
conn.on("error", () =>{
});
}).listen(8002)
console.log("WebSocket建立完毕")
- 先引入nodejs-websocket
- 创建一个websocket连接,并监听端口8002
-
conn.on()为当有websocket连接到改server,就会执行,通过 conn.sendText()返回数据,我这里使用了定期器每隔两秒返回数据,然后显示在页面
-
当连接的websocket关闭之后,调用close和error方法,conn.on("error", () =>{ })没有意义,但必须需要,不然会报错而终止后面的socket连接
以上就是服务端的websocket创建,启动起来等待连接
客户端实现
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="mess">正在连接...</div>
<div>
<button id='btn_close'>关闭连接</button>
<button id='btn_open'>打开连接</button>
</div>
<script>
var wsTest = null
function connectSocket() {
var ws = new WebSocket('ws://127.0.0.1:8002');
ws.onopen = function (e) {
console.log("连接服务器成功");
ws.send("连接成功");
}
ws.onclose = function (e) {
console.log("服务器关闭");
}
ws.onmessage = function (e) {
mess.innerHTML = "连接成功"
var node = document.createElement('div')
node.innerHTML = e.data
document.body.appendChild(node);
}
return ws
}
var mess = document.getElementById("mess");
if (window.WebSocket) {
wsTest = connectSocket()
document.getElementById('btn_open').onclick = function () {
if (wsTest && wsTest.readyState === 1) {
wsTest.close() //关闭连接
}
wsTest = connectSocket()
}
document.getElementById('btn_close').onclick = function () {
wsTest.close() //关闭连接
}
}
</script>
</body>
</html>
- 先判断当前的浏览器是否支持websocket
- 创建WebSocket的实例并连接Socket,使用我们本机的回环地址:ws://127.0.0.1:8002
- 连接成功调用onopen方法
- 当有onmessage返回时候调用,做数据处理
以上就是客户端的websocket创建
启动顺序应该是先启动服务端,在启动客户端