结合WebSocket 来实现一个俄罗斯方块小游戏吧~
效果图
WebSocket 介绍
webSocket是一项可以让服务器将数据主动推送给客户端的技术,是一种通信协议,区别于HTTP协议,HTTP协议只能实现客户端请求,服务端响应的这种单项通信;而WebSocket可以实现客户端与服务端的双向通讯,也就是可以做到服务端主动将消息推送给客户端。
WebSocket 特点
(1)建立在 TCP 协议之上,服务器端的实现比较容易。
(2)与 HTTP 协议有着良好的兼容性。默认端口也是80和443,并且握手阶段采用 HTTP 协议,因此握手时不容易屏蔽,能通过各种 HTTP 代理服务器。
(3)数据格式比较轻量,性能开销小,通信高效。
(4)可以发送文本,也可以发送二进制数据。
(5)没有同源限制,客户端可以与任意服务器通信。
(6)协议标识符是ws(如果加密,则为wss),服务器网址就是 URL。
服务端实时通信的方法:AJAX轮询和Long Polling长轮询
AJAX轮询
AJAX轮询也就是定时发送请求,也就是普通的客户端与服务端通信过程,只不过是无限循环发送,这样,可以保证服务端一旦有最新消息,就可以被客户端获取。
Long Polling长轮询
Long Polling长轮询是客户端和浏览器保持一个长连接,等服务端有消息返回,断开。
然后再重新连接,也是个循环的过程,无穷无尽……客户端发起一个Long Polling,服务端如果没有数据要返回的话,会hold住请求,等到有数据,就会返回给客户端。客户端又会再次发起一次Long Polling,再重复一次上面的过程。
开始码代码吧,小游戏走起!
搭建自己的WebSocket
1.终端输入,安装模块
npm install nodejs-websocket
2.建立wsServer.js,输入代码如下:
var ws = require("nodejs-websocket")
var PORT= 8080
var server = ws.createServer(function (conn) {
//受到连接触发//
console.log('new connection');
conn.on("text", function (str) {
// 收到信息触发 接收 //
console.log("received" + str)
conn.sendText(str) // 发送 数据 //
})
conn.on("close", function (code, reason) {
// 断开连接触发 //
console.log("connection closed")
})
conn.on("error", function (err) {
// 出错触发 //
console.log("header err")
console.log(err)
})
}).listen(PORT)
console.log("websocket server listening on port" + PORT)
3.运行你的server
node wsServer.js
4.html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>俄罗斯方块1</title>
</head>
<body>
<h1>测试websocket</h1>
<input type="text" id="snedTxt" />
<button id="sendb">发送</button>
<div id="recv"></div>
<script type="text/javascript">
var ws = new WebSocket("ws://localhost:8080/"); // 设置服务器地址 //
ws.onopen = function () { // onopen 连接触发 //
console.log("websocket open");
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;
}
document.getElementById("sendb").onclick = function () { // 监测 id=“sendb”的 按钮 触发 onclick 就会发送数据 send //
var txt = document.getElementById("snedTxt").value;
ws.send(txt);
}
</script>
</body>
</html>
打开浏览器,在文本框输入内容,数据将被发送至服务器,并在终端返回数据
如果网页打开还是没法正常显示,或许需要自己在防火墙开一个端口,这里只说明了建立入站规则,出站规则步骤基本一致,如图