产品网站中很多地方需要用到实时交互，web端的实时交互。
具体为活动抽奖案例：
现场一个大屏，显示中奖人列表相关信息；
主持人一个pad控制开始抽奖结束抽奖；
每个活动现场的观众的手机。用来摇动手机进行抽奖
毫无疑问用websocket，WebSocket相较于HTTP来说，有很多的优点，主要表现在WebSocket只建立一个TCP连接，可以主动推送数据到客户端，而且还有更轻量级的协议头，减少数据传送量。所以WebSocket暂时来说是实时通讯的最佳协议了
至于服务器语言选择nodeJs，是因为NodeJs本身事件驱动的方式很擅长与大量客户端保持高并发的连接。所以就选择NodeJs了。
安装nodejs，然后再安装一个nodejs-websocket的模块。然后就可以开始建立服务器了，因为有了nodejs-websocket模块，所以很多工作都不用我们自己做，直接调用别人封装好的方法就行了
服务器代码：
var ws = require("nodejs-websocket")
var net = require(‘net‘)
var clients_luck_show= new Array();
var clients_luck_control= new Array();
var clients_luck_client= new Array();
var datas= new Array();
// Scream server example: "hi" . "HI!!!"
var server = ws.createServer(function (conn) {
conn.on("text", function (str) {
onData(str,conn);
})
conn.on("close", function (code, reason) {
onDisconnect();
})
})
server.listen(8000)
function onDisconnect(){
console.log("connect close");
clients_luck_show.length=0;
clients_luck_control.length=0;
clients_luck_client.length=0;
}
function onData(data,conn){
console.log("data="+data);
//conn.sendText(str);
var json = JSON.parse(data);
switch (json.action){
case "reg":
regClient(JSON.parse(data),conn);
break;
case "luckcontrol":
sendtoclient(clients_luck_show,json,data);
sendtoclient(clients_luck_client,json,data);
break;
case "luckok":
sendtoclient(clients_luck_show,json,data);
break;
case "luckend":
sendtoclient(clients_luck_show,json,data);
sendtoclient(clients_luck_control,json,data);
sendtoclient(clients_luck_client,json,data);
break;
}
}
function regClient(json , conn){
var id = conn.key;
datas[id] = json.showid;
switch (json.type){
case "luck_show":
clients_luck_show[conn.key]=conn;
break;
case "luck_client":
clients_luck_client[conn.key]=conn;
break;
case "luck_control":
clients_luck_control[conn.key]=conn;
break;
}
conn.sendText(json.type+"，注册成功");
}
function sendtoclient(clients,json,data) {
console.log("---------------------------------------------------------");
for(var key in clients){
var id = clients[key].key;
if(datas[id] == json.showid){
clients[key].sendText(data);
console.log("sendText="+data);
}
}
}
控制端js代码
/*远程控制开始----------------------------------------------*/
var ws = null;
function init_connect() {
if(ws == null){
// 取得WebSocket连接入口(WebSocket URI)
var target = "ws://"+window.location.hostname+":8000";
// 创建WebSocket
if (‘WebSocket‘ in window) {
ws = new WebSocket(target);
} else if (‘MozWebSocket‘ in window) {
ws = new MozWebSocket(target);
} else {
alert(‘本浏览器不支持远程控制功能，请使用支持HTML5的浏览器。‘);
return;
}
// 定义Open事件处理函数
ws.onopen = function () {
setConnected(true);
reg_luck_control();
};
// 定义Message事件处理函数(收取服务端消息并处理)
ws.onmessage = function (event) {
processMessage(event.data)
console.log(‘Received: ‘ + event.data);
};
// 定义Close事件处理函数
ws.onclose = function () {
ws = null;
setConnected(false);
};
}
}
// 关闭WebSocket连接
function disconnect() {
if (ws != null) {
ws.close();
ws = null;
}
setConnected(false);
}
function setConnected(connected) {
if(connected){
console.log(‘Info: WebSocket connection opened.‘);
}
else{
console.log(‘Info: WebSocket connection closed.‘);
}
}
//注册控制端
function reg_luck_control(){
if (ws != null) {
var message = {action:"reg",type:"luck_control",showid:"<?php echo $configluck[‘LuckId‘]; ?>"};
// 向服务端发送消息
var msg =JSON.stringify(message);
console.log(msg);
ws.send(msg);
} else {
init_connect();
}
}
function processMessage(msg){
var data=msg;
if(typeof(msg) == "string"){
try{
data = JSON.parse(msg);
}catch(e){
console.log(msg);
return;
}
}
if(data.action=="luckend"){
init_page();
}
}
大屏端js代码
/*远程控制开始----------------------------------------------*/
var ws = null;
function init_connect() {
if(ws == null){
// 取得WebSocket连接入口(WebSocket URI)
var target = "ws://"+window.location.hostname+":8000";
// 创建WebSocket
if (‘WebSocket‘ in window) {
ws = new WebSocket(target);
} else if (‘MozWebSocket‘ in window) {
ws = new MozWebSocket(target);
} else {
alert(‘本浏览器不支持远程控制功能，请使用支持HTML5的浏览器。‘);
return;
}
// 定义Open事件处理函数
ws.onopen = function () {
setConnected(true);
reg_luck();
select_luckstate();
};
// 定义Message事件处理函数(收取服务端消息并处理)
ws.onmessage = function (event) {
processMessage(event.data)
console.log(‘Received: ‘ + event.data);
};
// 定义Close事件处理函数
ws.onclose = function () {
ws = null;
setConnected(false);
};
}
}
// 关闭WebSocket连接
function disconnect() {
if (ws != null) {
ws.close();
ws = null;
}
setConnected(false);
}
function setConnected(connected) {
if(connected){
console.log(‘Info: WebSocket connection opened.‘);
}
else{
console.log(‘Info: WebSocket connection closed.‘);
}
}
function reg_luck(){
if (ws != null) {
var message = {action:"reg",type:"luck_show","showid":"<?php echo $configluck[‘LuckId‘]; ?>"}
// 向服务端发送消息
var msg =JSON.stringify(message);
console.log(msg);
ws.send(msg);
} else {
init_connect();
}
}
function processMessage(msg){
var data=msg;
if(typeof(msg) == "string"){
try{
data = JSON.parse(msg);
}catch(e){
console.log(msg);
return;
}
}
if(data.action=="luckcontrol"){ //来自抽奖控制页面的命令
console.log(‘luckcontrol: ‘+msg);
select_luckstate();
}
if(data.action=="luckok"){ //来自手机客户端的命令
console.log(‘luckok: ‘+msg);
update_luck_show(msg);
}
if(data.action=="luckend"){//来自手机客户端的命令
console.log(‘luckend: ‘+msg);
update_luck_show(msg);
}
}
手机客户端类似
时间： 2024-11-05 17:29:55