小程序簽到功能,彈幕在微信大屏幕上的實(shí)現(xiàn)
有一種簽到功能是實(shí)現(xiàn)在大屏幕上顯示彈幕文字,那么這種形式小程序是否也支持呢?
在HTML5規(guī)范中,最受人關(guān)注的Web技術(shù)就是正迅速變得流行的WebSocket API。WebSocket提供了一個(gè)受歡迎的技術(shù),以替代我們過(guò)去幾年一直在用的Ajax技術(shù)。這個(gè)新的API提供了一個(gè)方法,從客戶端使用簡(jiǎn)單的語(yǔ)法有效地推動(dòng)消息到服務(wù)器。讓我們看一看Html5的WebSocket API:它可用于客戶端、服務(wù)器端。而且有一個(gè)優(yōu)秀的第三方API,名為Socket.IO。使用WebSocket可以方便的實(shí)現(xiàn)實(shí)時(shí)消息的處理,在互動(dòng)系統(tǒng)中可以使用WebSocket 來(lái)完成微信簽到和消息彈幕
一、什么是WebSocket API?
WebSocket API是下一代客戶端-服務(wù)器的異步通信方法。該通信取代了單個(gè)的TCP套接字,使用ws或wss協(xié)議,可用于任意的客戶端和服務(wù)器程序。WebSocket目前由W3C進(jìn)行標(biāo)準(zhǔn)化。WebSocket已經(jīng)受到Firefox 4、Chrome 4、Opera 10.70以及Safari 5等瀏覽器的支持。
WebSocket API最偉大之處在于服務(wù)器和客戶端可以在給定的時(shí)間范圍內(nèi)的任意時(shí)刻,相互推送信息。WebSocket并不限于以Ajax(或XHR)方式通信,因?yàn)锳jax技術(shù)需要客戶端發(fā)起請(qǐng)求,而WebSocket服務(wù)器和客戶端可以彼此相互推送信息;XHR受到域的限制,而WebSocket允許跨域通信。
Ajax技術(shù)很聰明的一點(diǎn)是沒(méi)有設(shè)計(jì)要使用的方式。WebSocket為指定目標(biāo)創(chuàng)建,用于雙向推送消息。
二、WebSocket API的用法
只專(zhuān)注于客戶端的API,因?yàn)槊總€(gè)服務(wù)器端語(yǔ)言有自己的API。下面的代碼片段是打開(kāi)一個(gè)連接,為連接創(chuàng)建事件監(jiān)聽(tīng)器,斷開(kāi)連接,消息時(shí)間,發(fā)送消息返回到服務(wù)器,關(guān)閉連接。
[
// 打開(kāi)Socket socket.onopen = function(event) {
// 發(fā)送一個(gè)初始化消息 socket.send('I am the client and I\'m listening!');
// 監(jiān)聽(tīng)消息 socket.onmessage = function(event) { console.log('Client received a message',event); };
// 監(jiān)聽(tīng)Socket的關(guān)閉 socket.onclose = function(event) { console.log('Client notified socket has closed',event); };
// 關(guān)閉Socket.... //socket.close() };
讓我們來(lái)看看上面的初始化片段。參數(shù)為URL,ws表示W(wǎng)ebSocket協(xié)議。onopen、onclose和onmessage方法把事件連接到Socket實(shí)例上。每個(gè)方法都提供了一個(gè)事件,以表示Socket的狀態(tài)。
onmessage事件提供了一個(gè)data屬性,它可以包含消息的Body部分。消息的Body部分必須是一個(gè)字符串,可以進(jìn)行序列化/反序列化操作,以便傳遞更多的數(shù)據(jù)。
WebSocket的語(yǔ)法非常簡(jiǎn)單,使用WebSockets是難以置信的容易……除非客戶端不支持WebSocket。IE瀏覽器目前不支持WebSocket通信。如果你的客戶端不支持WebSocket通信,下面有幾個(gè)后備方案供你使用:
Flash技術(shù) —— Flash可以提供一個(gè)簡(jiǎn)單的替換。 使用Flash最明顯的缺點(diǎn)是并非所有客戶端都安裝了Flash,而且某些客戶端,如iPhone/iPad,不支持Flash。
AJAX Long-Polling技術(shù) —— 用AJAX的long-polling來(lái)模擬WebSocket在業(yè)界已經(jīng)有一段時(shí)間了。它是一個(gè)可行的技術(shù),但它不能優(yōu)化發(fā)送的信息。也就是說(shuō),它是一個(gè)解決方案,但不是最佳的技術(shù)方案。
由于目前的IE等瀏覽器不支持WebSocket,要提供WebSocket的事件處理、返回傳輸、在服務(wù)器端使用一個(gè)統(tǒng)一的API,那么該怎么辦呢?幸運(yùn)的是,Guillermo Rauch創(chuàng)建了一個(gè)Socket.IO技術(shù)。
- 第 1 頁(yè)【簽到】小程序簽到功能,彈幕在微信大屏幕上的實(shí)現(xiàn)
- 第 2 頁(yè)【小程序簽到功能】 微信掃碼簽到實(shí)現(xiàn)彈幕上屏