使用Web Socket API

1、主講人： 曹興會Web Socket通信的基本知識使用Web Socket API使用WebSocket API1. WebSocket通信的基本知識WebSocket是HTML5提供的，在Web應用程序中，客戶端與服務器端之間進行的非HTTP的通信機制。它實現(xiàn)了用HTTP不容易實現(xiàn)的服務器端的數(shù)據(jù)推送等智能通信技術，因此受到了高度關注。使用WebSocket API可以在服務器與客戶端之間建立一個非HTTP的雙向連接。這個連接是實時的，也是永久的，除非被顯式關閉。1. WebSocket通信的基本知識這意味著當服務器想向客戶端發(fā)送數(shù)據(jù)時，可以立即將數(shù)據(jù)推送到客戶端的瀏覽器中，無需重新建立連接

2、。只要客戶端有一個被打開的socket（套接字）并且與服務器建立連接，服務器就可以把數(shù)據(jù)推送到這個socket上，服務器不再需要輪詢客戶端的請求，從被動轉(zhuǎn)為了主動。另外，在WebSocket API中，同樣可以使用跨域通信技術。在使用跨域通信技術時，應該確?？蛻舳伺c服務器端是互相信任的，服務器端應該判斷將它的服務發(fā)送給所有客戶端，還是只發(fā)送給某些受信任的客戶端。2.使用WebSocket APIWeb Socket的API本身非常簡單。將URL字符串作為參數(shù)，然后調(diào)用WebSocket對象的構(gòu)造函數(shù)來建立與服務器之間的通信連接，例如：URL字符串必須以“ws”或“wss”（加密通信時）文字作為

3、開頭。這個URL字符串被設定好之后，在JavaScript腳本中可以通過訪問WebSocket對象的url屬性來重新獲取。var webSocket = new WebSocket(ws:/localhost:8005/socket);2.使用WebSocket API通信連接建立好之后，就可以進行客戶端與服務器端的雙向通信了。使用WebSocket對象的send()方法對服務器發(fā)送數(shù)據(jù)，只能發(fā)送文本數(shù)據(jù)，但是可以使用JSON對象把任何JavaScript對象轉(zhuǎn)換成文本數(shù)據(jù)后進行發(fā)送。使用send()方法的代碼如下：通過獲取message事件句柄來接收服務器傳過來的數(shù)據(jù)，示例如下：webSoc

4、ket.send(data);webSocket.addEventListener(message, function(event) var data = event.data; / 其他處理代碼。 , false); 2.使用WebSocket API通過獲取open事件句柄來監(jiān)聽socket的打開事件，示例如下：webSocket.addEventListener(open, function(event) / 開始通信時的處理。 , false);通過獲取close事件句柄來監(jiān)聽socket的關閉事件，示例如下：webSocket.addEventListener(close, func

5、tion(event) / 通信結(jié)束時的處理。 , false);通過獲取close()方法來關閉socket，切斷通信連接，示例如下：webSocket.close(); 2.使用WebSocket API另外，可以通過讀取readyState的屬性值來獲取WebSocket對象的狀態(tài)。readyState屬性存在以下幾種屬性值：n CONNECTING（數(shù)字值0）：表示正在連接。n OPEN（數(shù)字值1）：表示已建立連接。n CLOSING（數(shù)字值2）：表示正在關閉連接。n CLOSED（數(shù)字值3）：表示已關閉連接2.使用WebSocket API使用WebSockets API，不僅可以發(fā)

6、送文本數(shù)據(jù)，而且可以JSON對象來發(fā)送一切JavaScript中的對象。使用JSON對象的關鍵是使用它的兩個方法JSON.parse()方法與JSON.stringify()方法，其中JSON.stringify()方法把JavaScript對象轉(zhuǎn)換成為文本數(shù)據(jù)，JSON.parse()方法將文本數(shù)據(jù)轉(zhuǎn)回為JavaScript對象。示例如下：var host = ws:/localhost:8005/socket; var webSocket = new WebSocket(host); var userName, userAge, successFlag, currentTime; 2.使用WebSocket APIwebSocket.addEventListener(message,function(event)varDataBase=JSON.parse(event.data);userName=DataBase.userName;userAge=DataBase.userAge;successFlag=false;if(DataBase.DataType=SQLServer)successFlag=InsertSQLData();elseif(DataBase.DataType=ORACLE)successFlag=InsertO