1、WebSocket是什么？
WebSocket是一种网络通信协议， 一种由HTML5 开始提供的、在单个 TCP 连接上进行全双工通讯的协议。它和HTTP协议的最大区别在于：HTTP 协议是一种无状态的、无连接的、单向的应用层协议当客户端想要知道服务端的变化时，HTTP协议必须使用“轮询”的方式，效率很低；而WebSocket只需一次连接，便可以让服务端直接向客户端推送信息，从而告别轮询。
下面来构建一个基于JS的WebSocket通信实例：
2、服务端
为与客户端一致，后端引入ws模块，构建服务器，监听对应事件，具体代码如下：
var ws = require("ws"); // 加载ws模块;
// 启动websocket服务器
var wsServer = new ws.Server({
host: "127.0.0.1",
port: 8183,
});
console.log('WebSocket sever is listening at port localhost:8183');
// 建立连接，监听客户端请求，绑定对应事件;
function on_server_client_comming (wsObj) {
console.log("request comming");
websocket_add_listener(wsObj);
}
wsServer.on("connection", on_server_client_comming);
// 各事件处理逻辑
function websocket_add_listener(wsObj) {
wsObj.on("message", function(data) {
console.log("request data:"+data);
setTimeout(()=>{ //收到请求，回复
wsObj.send("1秒延时，收到了，正在处理");
},1000);
/*****
* 处理业务逻辑
*/
setTimeout(()=>{ //完成请求，回复
wsObj.send("3秒延时，返回数据，关闭连接");
wsObj.close()
},3000);
});
wsObj.on("close", function() {
console.log("request close");
});
wsObj.on("error", function(err) {
console.log("request error", err);
});
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
运行该js构建服务器,结果如下：
3、客户端
支持H5的浏览器均内置WebSocket 对象，直接引用即可，具体代码如下：
<!DOCTYPE html>
<html>
<head>
<title>WebSocket Test</title>
</head>
<body>
<script>
var wsObj = new WebSocket("ws://127.0.0.1:8183"); //建立连接
wsObj.onopen = function(){ //发送请求
alert("open");
wsObj.send("Hello WebSocket");
};
wsObj.onmessage = function(ev){ //获取后端响应
alert(ev.data);
};
wsObj.onclose = function(ev){
alert("close");
};
wsObj.onerror = function(ev){
alert("error");
};
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
在浏览器中打开该页面，依次看到如下结果
此时，服务端控制台打印出的信息为：
至此，一个基于JS的WebSocket通信实例构建完毕。
更多关于WebSocket的知识点，可以点击查看这里。
