如果想对一个列表做实时的更新,传统的做法是采用轮询的方式。以web为例,通过Ajax定时请求服务端然后获取数据显示在页面。这种方式实现简单,缺点就是浪费资源。
HTTP1.1新增加了对websocket的支持,这样就可以将被动展示转变为主动通知。也就是通过websocket与服务端保持持久链接,一旦数据发生变化,由server通知client数据有更新,然后再进行刷新等操作。这样就省去了很多不必要的被动请求,节省了服务器资源。
要实现一个webscoket的程序,首先需要使用支持html5的浏览器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
if (ws === null){ var wsServer = 'ws://' + location.hostname + ':8888' ; ws = new WebSocket(wsServer); ws.onopen = function (){ console.log( "socket连接已打开" ); }; ws.onmessage = function (e){ console.log( "message:" + e.data); }; ws.onclose = function (){ console.log( "socket连接已断开" ); }; ws.onerror = function (e){ console.log( "ERROR:" + e.data); }; //离开页面时关闭连接 $(window).bind( 'beforeunload' , function (){ ws.close(); } ); } |
这样就实现了一个client,不过事情还远没有结束。上面的代码只是简单的进行了连接,对话,关闭等基本动作。如果想和服务端进行通讯,必须要有更具体的方案。比如收到message时判断类型进行进一步操作。
服务端:此处采用Swoole进行php服务端的websocket开发,使用swoole进行php的websocket开发非常简单,而且它还支持httpserver的支持。
1
2
3
4
5
6
7
8
9
10
11
12
|
$server = new swoole_websocket_server( "0.0.0.0" , 8888); $server ->on( 'open' , function (swoole_websocket_server $server , $request ) { echo "server: handshake success with fd{$request->fd}\n" ; }); $server ->on( 'message' , function (swoole_websocket_server $server , $frame ) { echo "receive from {$frame->fd}:{$frame->data},opcode:{$frame->opcode},fin:{$frame->finish}\n" ; $server ->push( $frame ->fd, "this is server" ); }); $server ->on( 'close' , function ( $ser , $fd ) { echo "client {$fd} closed\n" ; }); $server ->start(); |
swoole是一个php的扩展,安装方式可以参考这里:php安装swoole扩展的方法
本文先写到这里,下一篇会写一些更具体的操作,感兴趣的朋友请继续关注本站。谢谢!