WebSocket 简介及应用实例

<?php
//server.phpset_time_limit(0);
$ip = '127.0.0.1';
$port = 1999;
// 创建一个Socket
$sock = socket_create(AF_INET,SOCK_STREAM,SOL_TCP);
// 绑定Socket地址和端口
$ret = socket_bind($sock,$ip,$port);
// 开始监听链接
$ret = socket_listen($sock,4);$count = 0; //最多接受几次请求后就退出
do {
   // 另一个Socket来处理通信
   if (($msgsock = socket_accept($sock)) >= 0) {        
       // 发到客户端
       $msg ="server: HELLO CLIENTS!\n";
       if (socket_write($msgsock, $msg, strlen($msg))) {
           echo "发送成功!\n";
       }
       // 获得客户端的输入
       $buf = socket_read($msgsock,8192);
       
       $talkback = "接受成功！内容为:$buf\n";
       echo $talkback;
       
       if(++$count >= 5){
           break;
       };    
   }
   // 关闭sockets
   socket_close($msgsock);
} while (true);
socket_close($sock);
echo "TCP 连接关闭OK\n";
?>

<?php
//client.phperror_reporting(E_ALL);
set_time_limit(0);
$port = 1999;
$ip = "127.0.0.1";// 创建Socket
$socket = socket_create(AF_INET, SOCK_STREAM, SOL_TCP);
// 绑定Socket地址和端口
$result = socket_connect($socket, $ip, $port);
if ($result >= 0) echo "TCP 连接OK\n";$in = "client: HELLO SERVER!\r\n";
if(socket_write($socket, $in, strlen($in))) {
   echo "发送成功！\n";
}
$out = '';
while($out = socket_read($socket, 8192)) {
   echo "接受成功！内容为:",$out;
}socket_close($socket);
echo "TCP 连接关闭OK\n";
?>

   Socket 之于 WebSocket
   就像
   Java 和 JavaScript
   雷锋 和 雷峰塔
   张三 和 张三丰
   周杰 和 周杰伦
   北大 和 北大青鸟
   印度 和 印度尼西亚
   一样
   基本上没啥关系...
   
           -- 鲁迅《我没说过的话》            

GET /chat HTTP/1.1
Host: example.com:8000
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Sec-WebSocket-Version: 13

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

enum BinaryType { "blob", "arraybuffer" };
[Constructor(USVString url, optional (DOMString or sequence<DOMString>) protocols = []), Exposed=(Window,Worker)]
interface WebSocket : EventTarget {
 readonly attribute USVString url; // ready state
 const unsigned short CONNECTING = 0;
 const unsigned short OPEN = 1;
 const unsigned short CLOSING = 2;
 const unsigned short CLOSED = 3;
 readonly attribute unsigned short readyState;
 readonly attribute unsigned long long bufferedAmount; // networking
 attribute EventHandler onopen;
 attribute EventHandler onerror;
 attribute EventHandler onclose;
 readonly attribute DOMString extensions;
 readonly attribute DOMString protocol;
 void close([Clamp] optional unsigned short code, optional USVString reason); // messaging
 attribute EventHandler onmessage;
 attribute BinaryType binaryType;
 void send(USVString data);
 void send(Blob data);
 void send(ArrayBuffer data);
 void send(ArrayBufferView data);
};

var ws = new WebSocket('ws://www.xxx.com/some.php');
ws.send('xxx'); //每次只能发送字符串
ws.onmessage = function(event) {
   var data = event.data;
};
ws.onerror = function() {
   ws.close();
};

// server.jsvar express = require('express')
var ws = require('./ws')var app = express()app.get('/', function (req, res) {
   res.sendFile(__dirname + '/ws.html');
})app.listen(3000, function () {
 console.log('Example app listening on port 3000!')
})

// ws.jsconst { Server, OPEN } = require('ws');const clients = []; //array of websocket clients
const cardsArr = []; //array of {cardId, count, title, ...}let _lock = false;const wss = new Server({port: 40510})
wss.on('connection', function (ws) {   const _cid = clients.push(ws) - 1;   ws.on('message', function (json) {       const {
           act,
           cid,
           data
       } = JSON.parse(json);       switch (act) {
           case 'client:join':
               _onCustomerJoin(ws, _cid);
               break;
           case 'client:leave':
               _onCustomerLeave(cid);
               break;
           case 'client:add': //增加牌
               _onAddCard(cid, data);
               break;
           case 'client:update': //修改牌
               _onUpdateCard(cid, data);
               break;
           case 'client:remove': //删除牌
               _onRemoveCard(cid, data);
               break;
           case 'client:win': //下单
               _onWin(cid);
               break;
           default:
               console.log('received: %s', act, cid)
               break;
       }   });
});function _ensureLock(func) {
   return function() {
       if (_lock) return;
       _lock = true;
       const rtn = func.apply(null, arguments);
       _lock = false;
       return rtn;
   };
}function _findCard(cardId) {
   const cidx = cardsArr.map(Card=>Card.cardId).indexOf(cardId);
   return cidx;
}const _broadcast = (excludeId, msg, data=null)=>{
   clients.forEach( (client, cidx)=>{
       if (cidx === excludeId) return;
       if (client && client.readyState === OPEN) {
           client.send(JSON.stringify({
               act: 'server:broadcast',
               msg: msg,
               data: data
           }));
       }
   } );
};const _onCustomerJoin = (ws, cid)=>{
   ws.send(JSON.stringify({
       act: 'server:regist',
       data: {
           cid: cid
       }
   }));
   _broadcast(cid, '玩家加入：', {cid: cid});
};
const _onCustomerLeave = (cid)=>{
   clients[cid].terminate();
   clients.splice(cid, 1);
   _broadcast(cid, '玩家退出：', {cid: cid});
};
const _onAddCard = _ensureLock( (cid, data)=>{
   const d = _findCard(data.cardId);
   if (d !== -1) {
       cardsArr.splice(d, 1);
   }
   cardsArr.push(data);
   _broadcast(-1, '玩家添加了牌', {
       cid: cid,
       Card: data,
       cardsArr: cardsArr
   });
} );
const _onUpdateCard = _ensureLock( (cid, data)=>{
   const d = _findCard(data.cardId);
   if (d === -1) return;
   cardsArr[d] = data;
   _broadcast(-1, '玩家更改了牌', {
       cid: cid,
       Card: data,
       cardsArr: cardsArr
   });
} );
const _onRemoveCard = _ensureLock( (cid, data)=>{
   const d = _findCard(data.cardId);
   if (d === -1) return;
   cardsArr.splice(d, 1);
   _broadcast(-1, '玩家删除了牌', {
       cid: cid,
       Card: data,
       cardsArr: cardsArr
   });
} );
const _onWin = _ensureLock( (cid)=>{
   //do sth. here
   _broadcast(cid, '玩家胡牌了');
} );

<h1></h1>
<div></div><button onclick="_add()">出牌</button>
<button onclick="_update()">换牌</button>
<button onclick="_remove()">悔牌</button>
<button onclick="_win()">胡牌</button>
<button onclick="_leave()">离开</button><script>
   let cid = null;   const ws = new WebSocket('ws://localhost:40510');   ws.onopen = function () {
       console.log('websocket is connected ...');       _send({
           act: 'client:join'
       });
   };   ws.onmessage = function (ev) {
       
       const {
           act,
           msg,
           data
       } = JSON.parse(ev.data);       switch(act) {
           case 'server:regist':
               cid = data.cid;
               console.log(`regist: cid is ${cid}`);
               document.querySelector('h1').innerHTML = 'I AM: ' + cid;
               break;
           case 'server:broadcast':
               console.log('从服务器端接收的广播：', msg, data);
               if (data && data.cardsArr) {
                   document.querySelector('div').innerHTML = JSON.stringify(
                       data.cardsArr, null, 4
                   );
               }
               break;
           default:
               console.log(ev);
               break;
       }
   }   function _send(json) {
       ws.send(JSON.stringify(json));
   }   function _add() {
       _send({
           act: 'client:add',
           cid: cid,
           data: {
               cardId: 111,
               count: 1,
               title: '红桃A'
           }
       })
   }
   function _update() {
       _send({
           act: 'client:update',
           cid: cid,
           data: {
               cardId: 111,
               count: 2,
               title: '黑桃9'
           }
       })
   }
   function _remove() {
       _send({
           act: 'client:remove',
           cid: cid,
           data: {
               cardId: 111
           }
       })
   }
   function _win() {
       _send({
           act: 'client:win',
           cid: cid
       })
   }
   function _leave() {
       _send({
           act: 'client:leave',
           cid: cid
       })
   }
</script>