微信掃碼簽到實(shí)現(xiàn)彈幕上屏
三、帶Socket.IO的WebSocket
Socket.IO是Guillermo Rauch創(chuàng)建的WebSocket API,Guillermo Rauch是LearnBoost公司的首席技術(shù)官以及LearnBoost實(shí)驗(yàn)室的首席科學(xué)家。Socket.IO使用檢測(cè)功能來(lái)判斷是否建立WebSocket連接,或者是AJAX long-polling連接,或Flash等??煽焖賱?chuàng)建實(shí)時(shí)的應(yīng)用程序。Socket.IO還提供了一個(gè)NodeJS API,它看起來(lái)非常像客戶(hù)端API。建立客戶(hù)端Socket.IO
Socket.IO可以從GitHub下載,可以把socket.io.js文件包含到頁(yè)面中:
[
[/code
此時(shí),Socket.IO在此頁(yè)面上是有效的,是時(shí)候創(chuàng)建Socket了:
[
// 添加一個(gè)連接監(jiān)聽(tīng)器socket.on('connect',function() { console.log('Client has connected to the server!'); });
// 添加一個(gè)連接監(jiān)聽(tīng)器socket.on('message',function(data) { console.log('Received a message from the server!',data); });
// 添加一個(gè)關(guān)閉連接的監(jiān)聽(tīng)器socket.on('disconnect',function() { console.log('The client has disconnected!'); });
// 通過(guò)Socket發(fā)送一條消息到服務(wù)器function sendMessageToServer(message) { socket.send(message); }
Socket.IO簡(jiǎn)化了WebSocket API,統(tǒng)一了返回運(yùn)輸?shù)腁PI。傳輸包括:WebSocketFlash SocketAJAX long-pollingAJAX multipart streamingIFrameJSONP polling
你還可以設(shè)置任意的Socket.IO構(gòu)造器的第二個(gè)選項(xiàng),選項(xiàng)包括:
port - 待連接的端口transports - 一個(gè)數(shù)組,包含不同的傳輸類(lèi)型transportOptions - 傳輸?shù)膮?shù)使用的對(duì)象,帶附加屬性
Socket.IO還提供了由本地WebSocket API提供的普通連接、斷開(kāi)連接、消息事件。Socket還提供了封裝每個(gè)事件類(lèi)型的方法。
四、NodeJS和Socket.IO聯(lián)合開(kāi)發(fā)
Socket.IO提供的服務(wù)器端解決方案,允許統(tǒng)一的客戶(hù)端和服務(wù)器端的API。使用Node,你可以創(chuàng)建一個(gè)典型的HTTP服務(wù)器,然后把服務(wù)器的實(shí)例傳遞到Socket.IO。從這里,你創(chuàng)建連接、斷開(kāi)連接、建立消息監(jiān)聽(tīng)器,跟在客戶(hù)端一樣。
一個(gè)簡(jiǎn)單的服務(wù)器端腳本看起來(lái)如下:
[
// 在8080端口啟動(dòng)服務(wù)器var server= http.createServer(function(req, res){ // 發(fā)送HTML的headers和message res.writeHead(200,{ 'Content-Type': 'text/html' }); res.end('
Hello Socket Lover!
'); }); server.listen(8080);
// 創(chuàng)建一個(gè)Socket.IO實(shí)例,把它傳遞給服務(wù)器var socket= io.listen(server);
// 添加一個(gè)連接監(jiān)聽(tīng)器socket.on('connection', function);
你可以運(yùn)行服務(wù)器部分,假定已安裝了NodeJS,從命令行執(zhí)行:
[
現(xiàn)在客戶(hù)端和服務(wù)器都能來(lái)回推送消息了!在NodeJS腳本內(nèi),可以使用簡(jiǎn)單的JavaScript創(chuàng)建一個(gè)定期消息發(fā)送器:
[
服務(wù)器端將會(huì)每5秒推送消息到客戶(hù)端!
五、dojox.Socket和Socket.IO
Persevere的創(chuàng)建者Kris Zyp創(chuàng)建了dojox.Socket。dojox.Socket以Dojo庫(kù)一致的方式封裝了WebSocket API,用于在客戶(hù)端不支持WebSocket時(shí),使用long-polling替代。
下面是怎樣在客戶(hù)端使用dojox.Socket和在服務(wù)器端使用Socket.IO的例子:
[
dojox.socket.Reconnect還創(chuàng)建了在套接字失去連接時(shí)自動(dòng)重連。期待包含dojox.Socket的Dojo 1.6版本早日發(fā)布。
六、實(shí)際應(yīng)用和WebSocket資源
WebSocket對(duì)于大多數(shù)客戶(hù)機(jī)-服務(wù)器的異步通信是理想的,在瀏覽器內(nèi)實(shí)時(shí)聊天互動(dòng)是最突出的應(yīng)用。現(xiàn)場(chǎng)互動(dòng)系統(tǒng)使用最新的WebSocket技術(shù),來(lái)處理用戶(hù)簽到,實(shí)時(shí)消息和圖片發(fā)送,投票,抽獎(jiǎng)等消息,會(huì)帶給用戶(hù)最快最高效的極致體驗(yàn)。
- 第 1 頁(yè)【簽到】小程序簽到功能,彈幕在微信大屏幕上的實(shí)現(xiàn)
- 第 2 頁(yè)【小程序簽到功能】 微信掃碼簽到實(shí)現(xiàn)彈幕上屏