本文转自:http://www.it165.net/pro/html/201403/10363.html
本文为自己的学习记录,不喜勿喷。
最近都在学习HTML5,做canvas游戏之类的,发现HTML5中除了canvas这个强大的工具外,还有WebSocket也很值得注意。可以用来做双屏互动游戏,何为双屏互动游戏?就是通过移动端设备来控制PC端网页游戏。这样的话就要用到实时通讯了,而WebSocket无疑是最合适的。WebSocket相较于HTTP来说,有很多的优点,主要表现在WebSocket只建立一个TCP连接,可以主动推送数据到客户端,而且还有更轻量级的协议头,减少数据传送量。所以WebSocket暂时来说是实时通讯的最佳协议了。
至于服务器语言选择nodeJs,一是因为自己是做前端的,对javascript比较熟悉,相比于其他后台语言,自然会更喜欢nodeJs了,二是NodeJs本身事件驱动的方式很擅长与大量客户端保持高并发的连接。所以就选择NodeJs了。
服务器的实现很简单,先装一个nodeJs的模块,叫nodejs-websocket , 直接在nodeJs命令行中敲入:npm install nodejs-websocket回车就可以安装好了,然后就可以开始建立服务器了,因为有了nodejs-websocket模块,所以很多工作都不用我们自己做,直接调用别人封装好的方法就行了:
【服务端代码】,根据客户端传来的消息判断哪个是game1,哪个是game2,保存connection对象。
01.
var ws = require(
"nodejs-websocket"
);
02.
console.log(
"开始建立连接..."
)
03.
04.
var game1 =
null
,game2 =
null
, game1Ready =
false
, game2Ready =
false
;
05.
var server = ws.createServer(function(conn){
06.
conn.on(
"text"
, function (str) {
07.
console.log(
"收到的信息为:"
+str)
08.
if
(str===
"game1"
){
09.
game1 = conn;
10.
game1Ready =
true
;
11.
conn.sendText(
"success"
);
12.
}
13.
if
(str===
"game2"
){
14.
game2 = conn;
15.
game2Ready =
true
;
16.
}
17.
18.
if
(game1Ready&&game2Ready){
19.
game2.sendText(str);
20.
}
21.
22.
conn.sendText(str)
23.
})
24.
conn.on(
"close"
, function (code, reason) {
25.
console.log(
"关闭连接"
)
26.
});
27.
conn.on(
"error"
, function (code, reason) {
28.
console.log(
"异常关闭"
)
29.
});
30.
}).listen(
8001
)
31.
console.log(
"WebSocket建立完毕"
)
【game1代码】:通过点击获取三个框的内容,传到服务器
01.
<!doctype html>
02.
<html lang=
"en"
>
03.
<head>
04.
<meta charset=
"UTF-8"
>
05.
<title>Document</title>
06.
<style>
07.
.kuang{text-align: center;margin-top:200px;}
08.
#mess{text-align: center}
09.
.value{width: 200px;height:200px;border:1px solid;text-align: center;line-height: 200px;display: inline-block;}
10.
</style>
11.
</head>
12.
<body>
13.
<div id=
"mess"
>正在连接...</div>
14.
<div
class
=
"kuang"
>
15.
<div
class
=
"value"
id=
"value1"
>小明小明</div>
16.
<div
class
=
"value"
id=
"value2"
>大胸大胸</div>
17.
<div
class
=
"value"
id=
"value3"
>小张小张</div>
18.
</div>
19.
20.
<script>
21.
var mess = document.getElementById(
"mess"
);
22.
if
(window.WebSocket){
23.
var ws =
new
WebSocket(
'ws://192.168.17.80:8001'
);
24.
25.
ws.onopen = function(e){
26.
console.log(
"连接服务器成功"
);
27.
ws.send(
"game1"
);
28.
}
29.
ws.onclose = function(e){
30.
console.log(
"服务器关闭"
);
31.
}
32.
ws.onerror = function(){
33.
console.log(
"连接出错"
);
34.
}
35.
36.
ws.onmessage = function(e){
37.
mess.innerHTML =
"连接成功"
38.
document.querySelector(
".kuang"
).onclick = function(e){
39.
var time =
new
Date();
40.
ws.send(time +
" game1点击了“"
+ e.target.innerHTML+
"”"
);
41.
}
42.
}
43.
}
44.
</script>
45.
</body>
46.
</html>
【game2代码】:获取服务推送来的消息,并且显示
01.
<!doctype html>
02.
<html lang=
"en"
>
03.
<head>
04.
<meta charset=
"UTF-8"
>
05.
<title>Document</title>
06.
<style>
07.
.kuang{text-align: center;margin-top:200px;}
08.
#mess{text-align: center}
09.
</style>
10.
</head>
11.
<body>
12.
<div id=
"mess"
></div>
13.
14.
<script>
15.
var mess = document.getElementById(
"mess"
);
16.
if
(window.WebSocket){
17.
var ws =
new
WebSocket(
'ws://192.168.17.80:8001'
);
18.
19.
ws.onopen = function(e){
20.
console.log(
"连接服务器成功"
);
21.
ws.send(
"game2"
);
22.
}
23.
ws.onclose = function(e){
24.
console.log(
"服务器关闭"
);
25.
}
26.
ws.onerror = function(){
27.
console.log(
"连接出错"
);
28.
}
29.
30.
ws.onmessage = function(e){
31.
var time =
new
Date();
32.
mess.innerHTML+=time+
"的消息:"
+e.data+
"<br>"
33.
}
34.
}
35.
</script>
36.
</body>
37.
</html>
运行截图:
代码非常简单:很容易看懂,nodejs-WebSocket的调用也非常简洁明了,具体nodejs-websocket的API可以看https://www.npmjs.org/package/nodejs-websocket,里面都有介绍,自己测试一下,就很容易了,客户端的实现也是很简单,就通过onopen,onmessage等几个方法就可以实现了。