本發(fā)明屬于互聯(lián)網(wǎng)技術(shù)領(lǐng)域。

背景技術(shù)：

多終端頁(yè)面同步技術(shù)是指在多個(gè)客戶端輸入同一網(wǎng)頁(yè)地址返回統(tǒng)一的頁(yè)面狀態(tài)，同時(shí)每個(gè)客戶端對(duì)頁(yè)面進(jìn)行操作可以實(shí)時(shí)的顯示在每個(gè)客戶端中；目前現(xiàn)有技術(shù)解決方案中，要做到多終端頁(yè)面同步技術(shù)，通常使用服務(wù)端統(tǒng)一截圖，將截取后的圖片通過(guò)http網(wǎng)絡(luò)傳輸給各個(gè)的客戶端系統(tǒng)，從而達(dá)到多終端頁(yè)面同步效果。

現(xiàn)有的基于截屏方式多頁(yè)面同步技術(shù)的缺點(diǎn)是：

1.截屏對(duì)服務(wù)端機(jī)器要求較高，從而降低了展示的效果；

2.在傳輸中，由于圖片的大小比較大，對(duì)網(wǎng)絡(luò)的帶寬要求比較高，否則會(huì)極大的影響其他客戶端實(shí)時(shí)顯示的效果。

技術(shù)實(shí)現(xiàn)要素：

本發(fā)明的目的是提供一種基于WebSocket屬性同步的多終端頁(yè)面同步方法，減輕了服務(wù)器壓力，降低了網(wǎng)絡(luò)I/O，提高了傳輸性能，實(shí)現(xiàn)了每個(gè)客戶端都可以獨(dú)立渲染頁(yè)面,提高了渲染性能。

為實(shí)現(xiàn)上述目的，本發(fā)明采用以下技術(shù)方案：

一種基于WebSocket屬性同步的多終端頁(yè)面同步方法，包括如下步驟：

步驟1：建立多終端頁(yè)面同步系統(tǒng)，所述多終端頁(yè)面同步系統(tǒng)包括服務(wù)端和數(shù)個(gè)客戶端，所有客戶端均通過(guò)互聯(lián)網(wǎng)連接服務(wù)端，所有客戶端與服務(wù)端直接均采用WebSocket協(xié)議進(jìn)行數(shù)據(jù)通信；

步驟2：在服務(wù)端建立WEB頁(yè)面，在WEB頁(yè)面上建立WebSocket服務(wù)端監(jiān)聽(tīng)，并開(kāi)設(shè)服務(wù)端監(jiān)聽(tīng)端口；

步驟3：在服務(wù)端建立一個(gè)會(huì)話列表；

步驟4：設(shè)定客戶端A為任意一個(gè)客戶端，判斷客戶端A是否向服務(wù)端發(fā)送訪問(wèn)所述WEB頁(yè)面的請(qǐng)求：是，則執(zhí)行步驟5；否，則執(zhí)行步驟7；

步驟5：客戶端A向服務(wù)端發(fā)送訪問(wèn)所述WEB頁(yè)面的請(qǐng)求，即客戶端A連接所述服務(wù)端監(jiān)聽(tīng)端口，客戶端A連接所述服務(wù)端監(jiān)聽(tīng)端口時(shí)遵循WebSocket協(xié)議；

步驟6：服務(wù)端接收到客戶端A的請(qǐng)求，服務(wù)端將客戶端A的請(qǐng)求存儲(chǔ)在所述會(huì)話列表中；執(zhí)行步驟5；

步驟7：設(shè)定WEB頁(yè)面的屬性信息為組件的名稱、屬性名稱和屬性值，判斷客戶端A是否修改WEB頁(yè)面：是，則執(zhí)行步驟8；否，則執(zhí)行步驟11；

步驟8：客戶端A向服務(wù)端發(fā)送修改后的屬性信息；

步驟9：服務(wù)端接收到修改后的屬性信息后，將修改后的屬性信息發(fā)送給所述會(huì)話列表中除了客戶端A以外的所有其他客戶端；

步驟10：所述其他客戶端接收到修改后的屬性信息后，對(duì)自身的WEB頁(yè)面進(jìn)行更新，保持自身的WEB頁(yè)面與服務(wù)端的WEB頁(yè)面一致；

步驟11：判斷是否有任意一個(gè)客戶端對(duì)WEB頁(yè)面的屬性信息進(jìn)行修改：是，則執(zhí)行步驟7；否，則執(zhí)行步驟5。

所述服務(wù)端為服務(wù)器，所述客戶端為電腦或手機(jī)。

所述服務(wù)端和所述客戶端均通過(guò)Javascript軟件創(chuàng)建websocket協(xié)議。

本發(fā)明所述的一種基于WebSocket屬性同步的多終端頁(yè)面同步方法，減輕了服務(wù)器壓力，降低了網(wǎng)絡(luò)I/O，提高了傳輸性能，實(shí)現(xiàn)了每個(gè)客戶端都可以獨(dú)立渲染頁(yè)面,提高了渲染性能。

附圖說(shuō)明

圖1是本發(fā)明的流程圖。

具體實(shí)施方式

如圖1所示，一種基于WebSocket屬性同步的多終端頁(yè)面同步方法，包括如下步驟：

步驟1：建立多終端頁(yè)面同步系統(tǒng)，所述多終端頁(yè)面同步系統(tǒng)包括服務(wù)端和數(shù)個(gè)客戶端，所有客戶端均通過(guò)互聯(lián)網(wǎng)連接服務(wù)端，所有客戶端與服務(wù)端直接均采用WebSocket協(xié)議進(jìn)行數(shù)據(jù)通信；

步驟2：在服務(wù)端建立WEB頁(yè)面，在WEB頁(yè)面上建立WebSocket服務(wù)端監(jiān)聽(tīng)，并開(kāi)設(shè)服務(wù)端監(jiān)聽(tīng)端口；

步驟3：在服務(wù)端建立一個(gè)會(huì)話列表；

步驟4：設(shè)定客戶端A為任意一個(gè)客戶端，判斷客戶端A是否向服務(wù)端發(fā)送訪問(wèn)所述WEB頁(yè)面的請(qǐng)求：是，則執(zhí)行步驟5；否，則執(zhí)行步驟7；

步驟5：客戶端A向服務(wù)端發(fā)送訪問(wèn)所述WEB頁(yè)面的請(qǐng)求，即客戶端A連接所述服務(wù)端監(jiān)聽(tīng)端口，客戶端A連接所述服務(wù)端監(jiān)聽(tīng)端口時(shí)遵循WebSocket協(xié)議；

步驟6：服務(wù)端接收到客戶端A的請(qǐng)求，服務(wù)端將客戶端A的請(qǐng)求存儲(chǔ)在所述會(huì)話列表中；執(zhí)行步驟5；

步驟7：設(shè)定WEB頁(yè)面的屬性信息為組件的名稱、屬性名稱和屬性值，判斷客戶端A是否修改WEB頁(yè)面：是，則執(zhí)行步驟8；否，則執(zhí)行步驟11；

步驟8：客戶端A向服務(wù)端發(fā)送修改后的屬性信息；

步驟9：服務(wù)端接收到修改后的屬性信息后，將修改后的屬性信息發(fā)送給所述會(huì)話列表中除了客戶端A以外的所有其他客戶端；

步驟10：所述其他客戶端接收到修改后的屬性信息后，對(duì)自身的WEB頁(yè)面進(jìn)行更新，保持自身的WEB頁(yè)面與服務(wù)端的WEB頁(yè)面一致；

步驟11：判斷是否有任意一個(gè)客戶端對(duì)WEB頁(yè)面的屬性信息進(jìn)行修改：是，則執(zhí)行步驟7；否，則執(zhí)行步驟5。

所述服務(wù)端為服務(wù)器，所述客戶端為電腦或手機(jī)。

所述服務(wù)端和所述客戶端均通過(guò)Javascript軟件創(chuàng)建websocket協(xié)議。

本發(fā)明所述的一種基于WebSocket屬性同步的多終端頁(yè)面同步方法，減輕了服務(wù)器壓力，降低了網(wǎng)絡(luò)I/O，提高了傳輸性能，實(shí)現(xiàn)了每個(gè)客戶端都可以獨(dú)立渲染頁(yè)面,提高了渲染性能。