HTML5 中websocket長連線的具體實現方法
阿新 • • 發佈：2019-01-25
HTML5中通過呼叫與資料通訊相關的Web Socket API,實現從伺服器中推送資訊到客戶端。
步驟1、 建立連線，新建一個WebSocket物件十分的方便，程式碼如下：
var host = "ws://echo.websocket.org/";
var socket=new WebSocket(host);
注意：其中，URL必須以“ws”字元開頭，剩餘部分可以使用像HTTP地址一樣來編寫。該地址沒有使用
HTTP協議寫法，因為它的屬性為WebSocket URL;URL必須由4個部分組成，分別是通訊標記（ws）、主機名稱 （host），埠號（port）
步驟2，傳送資料。當WebSocket物件與伺服器建立聯絡後，使用如下程式碼傳送資料：
socket.send(dataInfo);
注意：其中，objWs為新建立的WebSocket物件，send()方法中的dataInfo引數為字元型別，即只能使用文字資料或者 將JSON物件轉換成文字內容的資料格式。
步驟3，接收資料。客戶端新增事件機制接收伺服器傳送來的資料，程式碼如下：
socket.onmessage=function(event){
//彈出收到的資訊
alert(event.data);
//其他程式碼
}
其中，通過回撥函式中event物件的"data"屬性來獲取伺服器端傳送的資料內容，該內容可以是一個字串或者JSON對 象。
步驟4 狀態標誌。通過WebSocket物件的“readyState”屬性記錄連線過程中的狀態值。
"readyState"屬性是一個連線的狀態標誌，用於獲取WebSocket物件在連線，開啟，變比中和關閉時的狀態。該狀態標誌共有4中屬性值，如下表所示：
————————————————————————————————————
屬性值 屬性常量 描述
————————————————————————————————————
0 CONNECTING 連線尚未建立
1 OPEN WebSocket的連結已經建立
2 CLOSING 連線正在關閉
3 CLOSED 連線已經關閉或不可用
————————————————————————————————————
WebSocket物件在連線過程中，通過偵測這個狀態標誌的變化，可以獲取伺服器端與客戶端連線的狀態，並將連線狀態已狀態碼形式返回給客戶端。
步驟5 關閉socket連線。
socket.close();
————————————————————————————————————————————————————————————————
在實際應用中，socket伺服器端的程式碼可以是Python，node.js,java,php。在這裡我可以使用http://www.websocket.org/網站提供的，socket
服務端。協議地址為：ws://echo.websocket.org/
完整程式碼如下：
————————————————————————————————————————————————————————————————
<html>
Socket又稱為套接字，是基於W3C標準開發在一個TCP介面中進行雙向通訊的技術。通常情況下，Socket用於描述IP地址和埠，是通訊過程中的一個字元控制代碼。當伺服器端又多個應用服務繫結一個Socket時，通過通訊中的字元控制代碼，實現不同埠對應不同應用服務功能。
目前，大部分瀏覽器都支援HTML5中Socket API的執行。WebSocket連線伺服器和客戶端，這個連結是一個實時的長連線，伺服器端一旦與客戶端建立了雙向連結，就可以將資料推送到Socket中，客戶端只要有一個Socket繫結的地址和埠與伺服器建立聯絡，就可以接收推送來的資料。
步驟1、 建立連線，新建一個WebSocket物件十分的方便，程式碼如下：
var host = "ws://echo.websocket.org/";
var socket=new WebSocket(host);
注意：其中，URL必須以“ws”字元開頭，剩餘部分可以使用像HTTP地址一樣來編寫。該地址沒有使用
HTTP協議寫法，因為它的屬性為WebSocket URL;URL必須由4個部分組成，分別是通訊標記（ws）、主機名稱 （host），埠號（port）
步驟2，傳送資料。當WebSocket物件與伺服器建立聯絡後，使用如下程式碼傳送資料：
socket.send(dataInfo);
注意：其中，objWs為新建立的WebSocket物件，send()方法中的dataInfo引數為字元型別，即只能使用文字資料或者 將JSON物件轉換成文字內容的資料格式。
步驟3，接收資料。客戶端新增事件機制接收伺服器傳送來的資料，程式碼如下：
socket.onmessage=function(event){
//彈出收到的資訊
alert(event.data);
//其他程式碼
}
其中，通過回撥函式中event物件的"data"屬性來獲取伺服器端傳送的資料內容，該內容可以是一個字串或者JSON對 象。
步驟4 狀態標誌。通過WebSocket物件的“readyState”屬性記錄連線過程中的狀態值。
"readyState"屬性是一個連線的狀態標誌，用於獲取WebSocket物件在連線，開啟，變比中和關閉時的狀態。該狀態標誌共有4中屬性值，如下表所示：
————————————————————————————————————
屬性值 屬性常量 描述
————————————————————————————————————
0 CONNECTING 連線尚未建立
1 OPEN WebSocket的連結已經建立
2 CLOSING 連線正在關閉
3 CLOSED 連線已經關閉或不可用
————————————————————————————————————
WebSocket物件在連線過程中，通過偵測這個狀態標誌的變化，可以獲取伺服器端與客戶端連線的狀態，並將連線狀態已狀態碼形式返回給客戶端。
步驟5 關閉socket連線。
socket.close();
————————————————————————————————————————————————————————————————
在實際應用中，socket伺服器端的程式碼可以是Python，node.js,java,php。在這裡我可以使用http://www.websocket.org/網站提供的，socket
服務端。協議地址為：ws://echo.websocket.org/
完整程式碼如下：
————————————————————————————————————————————————————————————————
<html>
<head>
<title>Jack張WebSocket例項</title>
<style>
html,body{font:normal 14px;margin:0 auto;}
#log {width:440px;
height:270px;
text-align:left;
overflow:auto;margin:0px auto;
font-weight:bold;color:#F8F8F8;
}
#msg {width:330px;margin:0px auto;}
#imagebg{
background-image: url(images/images.jpg);
background-repeat: no-repeat;
background-position: center top;
height:643px;
overflow:hidden;
text-align:center;
padding-top:120px;
}
</style>
<script>
//宣告一個socket
var socket;
//初始化方法
function init(){
var host = "ws://echo.websocket.org/";//宣告host注意：是ws協議
try{
socket = new WebSocket(host);//新建立一個socket物件
log('WebSocket - status '+socket.readyState);//將連線的狀態資訊顯示在log
socket.onopen = function(msg){ log("Welcome - status "+this.readyState); };//監聽開啟連線
socket.onmessage = function(msg){ log("Received: "+msg.data); };//監聽當接收資訊時觸發匿名函式
socket.onclose = function(msg){ log("Disconnected - status "+this.readyState); };//關閉連線
}
catch(ex){ log(ex); }
$("msg").focus();
}
//宣告一個傳送資訊方法
function send(){
var txt,msg;
txt = $("msg");
msg = txt.value;
if(!msg){ alert("Message can not be empty"); return; }
txt.value="";
txt.focus();
try{ socket.send(msg); log('Sent: '+msg); } catch(ex){ log(ex); }
}
//宣告一個對開連線，關閉socket方法
function quit(){
log("Goodbye!");
socket.close();
socket=null;
}
// 根據id獲取DOM元素
function $(id){ return document.getElementById(id); }
//將資訊顯示在id為log的div中
function log(msg){ $("log").innerHTML+="<br>"+msg; }
//鍵盤事件（回車）
function onkey(event){ if(event.keyCode==13){ send(); } }
</script>
</head>
<body onload="init()">
<div id="imagebg">
<div style="width:520px;text-align:left;margin:0px auto;color:#000;"> <a href="http://weibo.com/jackyo"><strong>新浪微博：Jack張</strong& gt; </div>
<br>
<div id="log"></div>
<input id="msg" type="textbox" onkeypress="onkey(event)"/>
<button onclick="send()">傳送</button>
<button onclick="quit()">斷開</button>
</div>
</body>
</html>