2. 程式人生 > >WebSocket協議詳解

WebSocket協議詳解

阿新 • • 發佈：2019-01-05
什麼是WebSocket？看過html5的同學都知道，WebSocket protocol 是HTML5一種新的協議。它是實現了瀏覽器與伺服器全雙工通訊(full-duplex)。HTML5定義了WebSocket協議，能更好的節省伺服器資源和頻寬並達到實時通訊。現在我們來探討一下html5的WebSocket

概念

HTML5作為下一代WEB標準，擁有許多引人注目的新特性，如Canvas、本地儲存、多媒體程式設計介面、WebSocket 等等。今天我們就來看看具有“Web TCP”之稱的WebSocket.

WebSocket的出現是基於Web應用的實時性需要而產生的。這種實時的Web應用大家應該不陌生，在生活中都應該用到過，比如新浪微博的評論、私信的通知，騰訊的WebQQ等。讓我們來回顧下實時 Web 應用的窘境吧。

在WebSocket出現之前，一般通過兩種方式來實現Web實時用：輪詢機制和流技術；其中輪詢有不同的輪詢，還有一種叫Comet的長輪詢。

輪詢：這是最早的一種實現實時 Web 應用的方案。客戶端以一定的時間間隔向服務端發出請求，以頻繁請求的方式來保持客戶端和伺服器端的同步。這種同步方案的缺點是，當客戶端以固定頻率向服務 器發起請求的時候，伺服器端的資料可能並沒有更新，這樣會帶來很多無謂的網路傳輸，所以這是一種非常低效的實時方案。

長輪詢：是對定時輪詢的改進和提高，目地是為了降低無效的網路傳輸。當伺服器端沒有資料更新的時候，連線會保持一段時間週期直到資料或狀態改變或者 時間過期，通過這種機制來減少無效的客戶端和伺服器間的互動。當然，如果服務端的資料變更非常頻繁的話，這種機制和定時輪詢比較起來沒有本質上的效能的提 高。

流：常就是在客戶端的頁面使用一個隱藏的視窗向服務端發出一個長連線的請求。伺服器端接到這個請求後作出迴應並不斷更新連線狀態以保證客戶端和服務 器端的連線不過期。通過這種機制可以將伺服器端的資訊源源不斷地推向客戶端。這種機制在使用者體驗上有一點問題，需要針對不同的

瀏覽器設計不同的方案來改進 使用者體驗，同時這種機制在併發比較大的情況下，對伺服器端的資源是一個極大的考驗。

上述方式其實並不是真正的實時技術，只是使用了一種技巧來實現的模擬實時。在每次客戶端和伺服器端互動的時候都是一次 HTTP 的請求和應答的過程，而每一次的 HTTP 請求和應答都帶有完整的 HTTP 頭資訊，這就增加了每次傳輸的資料量。但這些方式最痛苦的是開發人員，因為不論客戶端還是伺服器端的實現都很複雜，為了模擬比較真實的實時效果，開發人員 往往需要構造兩個HTTP連線來模擬客戶端和伺服器之間的雙向通訊，一個連線用來處理客戶端到伺服器端的資料傳輸，一個連線用來處理伺服器端到客戶端的數 據傳輸，這不可避免地增加了程式設計實現的複雜度，也增加了伺服器端的負載，制約了應用系統的擴充套件性。

基於上述弊端，實現Web實時應用的技術出現了，WebSocket通過瀏覽器提供的API真正實現了具備像C/S架構下的桌面系統的實時通訊能 力。其原理是使用JavaScript呼叫瀏覽器的API發出一個WebSocket請求至伺服器，經過一次握手，和伺服器建立了TCP通訊，因為它本質 上是一個TCP連線，所以資料傳輸的穩定性強和資料傳輸量比較小。

WebSocket 協議


WebSocket 協議本質上是一個基於 TCP 的協議。為了建立一個 WebSocket 連線，客戶端瀏覽器首先要向伺服器發起一個 HTTP 請求，這個請求和通常的 HTTP 請求不同，包含了一些附加頭資訊，其中附加頭資訊”Upgrade: WebSocket”表明這是一個申請協議升級的 HTTP 請求，伺服器端解析這些附加的頭資訊然後產生應答資訊返回給客戶端，客戶端和伺服器端的 WebSocket 連線就建立起來了，雙方就可以通過這個連線通道自由的傳遞資訊，並且這個連線會持續存在直到客戶端或者伺服器端的某一方主動的關閉連線。

WebSocket 協議
下面我們來詳細介紹一下 WebSocket 協議，由於這個協議目前還是處於草案階段，版本的變化比較快，我們選擇目前最新的 draft-ietf-hybi-thewebsocketprotocol-17 版本來描述 WebSocket 協議。因為這個版本目前在一些主流的瀏覽器上比如 Chrome,、FireFox、Opera 上都得到比較好的支援。通過描述可以看到握手協議

客戶端發到伺服器的內容:

 程式碼如下

    GET /chat HTTP/1.1
    Host: server.example.com
    Upgrade: websocket
    Connection: Upgrade
    Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
    Origin: http://example.com
    Sec-WebSocket-Protocol: chat, superchat
    Sec-WebSocket-Version: 13


從伺服器到客戶端的內容:

 程式碼如下

    HTTP/1.1 101 Switching Protocols
    Upgrade: websocket
    Connection: Upgrade
    Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
    Sec-WebSocket-Protocol: chat


這些請求和通常的 HTTP 請求很相似，但是其中有些內容是和 WebSocket 協議密切相關的。我們需要簡單介紹一下這些請求和應答資訊，”Upgrade:WebSocket”表示這是一個特殊的 HTTP 請求，請求的目的就是要將客戶端和伺服器端的通訊協議從 HTTP 協議升級到 WebSocket 協議。其中客戶端的Sec-WebSocket-Key和伺服器端的Sec-WebSocket-Accept就是重要的握手認證資訊了，這些內容將在服 務器端實現的博文中講解。

相信通過上文的講解你應該對WebSocket有了個初步認識了，如果有任何疑問歡迎交流。 



客戶端

如概念篇中介紹的握手協議，客戶端是由瀏覽器提供了API，所以只要使用JavaScript來簡單呼叫即可，而伺服器端是要自己實現的，伺服器端將在下個博文來講。

 程式碼如下
WebSocket JavaScript 介面定義:

[Constructor(in DOMString url, optional in DOMString protocol)]
interface WebSocket {
readonly attribute DOMString URL;
// ready state
const unsigned short CONNECTING = 0;
const unsigned short OPEN = 1;
const unsigned short CLOSED = 2;
readonly attribute unsigned short readyState;
readonly attribute unsigned long bufferedAmount;
 
// networking
attribute Function onopen;
attribute Function onmessage;
attribute Function onclose;
boolean send(in DOMString data);
void close();
};
WebSocket implements EventTarget;



簡單瞭解下介面方法和屬性：

readyState表示連線有四種狀態：
CONNECTING (0)：表示還沒建立連線；
OPEN (1)： 已經建立連線，可以進行通訊；
CLOSING (2)：通過關閉握手，正在關閉連線；
CLOSED (3)：連線已經關閉或無法開啟；
url是代表 WebSocket 伺服器的網路地址，協議通常是”ws”或“wss(加密通訊)”,send 方法就是傳送資料到伺服器端；
close 方法就是關閉連線；
onopen連線建立，即握手成功觸發的事件；
onmessage收到伺服器訊息時觸發的事件；
onerror異常觸發的事件；
onclose關閉連線觸發的事件；

JavaScript呼叫瀏覽器介面例項如下：

 程式碼如下

var wsServer = 'ws://localhost:8888/Demo'; //伺服器地址
var websocket = new WebSocket(wsServer); //建立WebSocket物件
websocket.send("hello");//向伺服器傳送訊息
alert(websocket.readyState);//檢視websocket當前狀態
websocket.onopen = function (evt) {
//已經建立連線
};
websocket.onclose = function (evt) {
//已經關閉連線
};
websocket.onmessage = function (evt) {
//收到伺服器訊息，使用evt.data提取
};
websocket.onerror = function (evt) {
//產生異常
}; 




伺服器端

握手協議的客戶端資料已經由瀏覽器代勞了，伺服器端需要我們自己來實現，目前市場上開源的實現也比較多如：

    Kaazing WebSocket Gateway(一個 Java 實現的 WebSocket Server)；
    mod_pywebsocket(一個 Python 實現的 WebSocket Server)；
    Netty(一個 Java 實現的網路框架其中包括了對 WebSocket 的支援)；
    node.js(一個 Server 端的 JavaScript 框架提供了對 WebSocket 的支援)；
    WebSocket4Net(一個.net的伺服器端實現)；

其實在目前的.net4.5框架中已經實現了WebSocket，不用官方實現，我們自己來寫個簡單的。伺服器端需要根據協議來握手、接收和傳送。


握手

首先我們再來回顧下握手協議：

客戶端發到伺服器的內容:

 程式碼如下
GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Origin: http://example.com
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13


 
從伺服器到客戶端的內容:

 程式碼如下
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
Sec-WebSocket-Protocol: chat



關鍵是伺服器端Sec-WebSocket-Accept，它是根據Sec-WebSocket-Key計算出來的：

取出Sec-WebSocket-Key，與一個magic string “258EAFA5-E914-47DA-95CA-C5AB0DC85B11” 連線成一個新的key串；
將新的key串SHA1編碼，生成一個由多組兩位16進位制數構成的加密串；
把加密串進行base64編碼生成最終的key，這個key就是Sec-WebSocket-Key；

例項程式碼如下：

 程式碼如下

/// <summary>
/// 生成Sec-WebSocket-Accept
/// </summary>
/// <param name="handShakeText">客戶端握手資訊</param>
/// <returns>Sec-WebSocket-Accept</returns>
private static string GetSecKeyAccetp(byte[] handShakeBytes,int bytesLength)
{
string handShakeText = Encoding.UTF8.GetString(handShakeBytes, 0, bytesLength);
string key = string.Empty;
Regex r = new Regex(@"Sec-WebSocket-Key:(.*?)rn");
Match m = r.Match(handShakeText);
if (m.Groups.Count != 0)
{
key = Regex.Replace(m.Value, @"Sec-WebSocket-Key:(.*?)rn", "$1").Trim();
}
byte[] encryptionString = SHA1.Create().ComputeHash(Encoding.ASCII.GetBytes(key + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"));
return Convert.ToBase64String(encryptionString);
}


如果握手成功，將會觸發客戶端的onopen事件。


解析接收的客戶端資訊

接收到客戶端資料解析規則如下：

1byte
bit: frame-fin，x0表示該message後續還有frame；x1表示是message的最後一個frame
3bit: 分別是frame-rsv1、frame-rsv2和frame-rsv3，通常都是x0
4bit: frame-opcode，x0表示是延續frame；x1表示文字frame；x2表示二進位制frame；x3-7保留給非控制frame；x8表示關 閉連線；x9表示ping；xA表示pong；xB-F保留給控制frame
2byte
1bit: Mask，1表示該frame包含掩碼；0，表示無掩碼
7bit、7bit+2byte、7bit+8byte: 7bit取整數值，若在0-125之間，則是負載資料長度；若是126表示，後兩個byte取無符號16位整數值，是負載長度；127表示後8個 byte，取64位無符號整數值，是負載長度
3-6byte: 這裡假定負載長度在0-125之間，並且Mask為1，則這4個byte是掩碼
7-end byte: 長度是上面取出的負載長度，包括擴充套件資料和應用資料兩部分，通常沒有擴充套件資料；若Mask為1，則此資料需要解碼，解碼規則為1-4byte掩碼迴圈和資料byte做異或操作。

解析程式碼如下，但沒有處理多幀和不包含掩碼的包：

 程式碼如下

/// <summary>
/// 解析客戶端資料包
/// </summary>
/// <param name="recBytes">伺服器接收的資料包</param>
/// <param name="recByteLength">有效資料長度</param>
/// <returns></returns>
private static string AnalyticData(byte[] recBytes, int recByteLength)
{
if (recByteLength < 2) { return string.Empty; }
 
bool fin = (recBytes[0] & 0x80) == 0x80; // 1bit，1表示最後一幀
if (!fin){
return string.Empty;// 超過一幀暫不處理
}
 
bool mask_flag = (recBytes[1] & 0x80) == 0x80; // 是否包含掩碼
if (!mask_flag){
return string.Empty;// 不包含掩碼的暫不處理
}
 
int payload_len = recBytes[1] & 0x7F; // 資料長度
 
byte[] masks = new byte[4];
byte[] payload_data;
 
if (payload_len == 126){
Array.Copy(recBytes, 4, masks, 0, 4);
payload_len = (UInt16)(recBytes[2] << 8 | recBytes[3]);
payload_data = new byte[payload_len];
Array.Copy(recBytes, 8, payload_data, 0, payload_len);
 
}else if (payload_len == 127){
Array.Copy(recBytes, 10, masks, 0, 4);
byte[] uInt64Bytes = new byte[8];
for (int i = 0; i < 8; i++){
uInt64Bytes[i] = recBytes[9 - i];
}
UInt64 len = BitConverter.ToUInt64(uInt64Bytes, 0);
 
payload_data = new byte[len];
for (UInt64 i = 0; i < len; i++){
payload_data[i] = recBytes[i + 14];
}
}else{
Array.Copy(recBytes, 2, masks, 0, 4);
payload_data = new byte[payload_len];
Array.Copy(recBytes, 6, payload_data, 0, payload_len);
 
}
 
for (var i = 0; i < payload_len; i++){
payload_data[i] = (byte)(payload_data[i] ^ masks[i % 4]);
}
return Encoding.UTF8.GetString(payload_data);
}




傳送資料至客戶端


伺服器傳送的資料以0x81開頭，緊接傳送內容的長度（若長度在0-125，則1個byte表示長度；若長度不超過0xFFFF，則後2個byte 作為無符號16位整數表示長度；若超過0xFFFF，則後8個byte作為無符號64位整數表示長度），最後是內容的byte陣列。

程式碼如下：

 程式碼如下

/// <summary>
/// 打包伺服器資料
/// </summary>
/// <param name="message">資料</param>
/// <returns>資料包</returns>
private static byte[] PackData(string message)
{
byte[] contentBytes = null;
byte[] temp = Encoding.UTF8.GetBytes(message);
 
if (temp.Length < 126){
contentBytes = new byte[temp.Length + 2];
contentBytes[0] = 0x81;
contentBytes[1] = (byte)temp.Length;
Array.Copy(temp, 0, contentBytes, 2, temp.Length);
}else if (temp.Length < 0xFFFF){
contentBytes = new byte[temp.Length + 4];
contentBytes[0] = 0x81;
contentBytes[1] = 126;
contentBytes[2] = (byte)(temp.Length & 0xFF);
contentBytes[3] = (byte)(temp.Length >> 8 & 0xFF);
Array.Copy(temp, 0, contentBytes, 4, temp.Length);
}else{
// 暫不處理超長內容
}
 
return contentBytes;
}



這裡只是簡單介紹，下節來做個完整的例項。 



說是完整的例項，其實並不完整，這裡需要說明，這個例項並沒有實現併發，也沒考慮到演算法和資源管理，所謂的完整是有客戶端和伺服器端，並且能跑起來演示。直接上菜，關於理論請看前面三篇博文，TCP請另看相關知識。

客戶端程式碼：

 程式碼如下

<html>
<head>
<meta charset="UTF-8">
<title>Web sockets test</title>
<script src="jquery-min.js" type="text/javascript"></script>
<script type="text/javascript">
var ws;
function ToggleConnectionClicked() {
try {
ws = new WebSocket("ws://10.9.146.31:1818/chat");//連線伺服器
ws.onopen = function(event){alert("已經與伺服器建立了連線rn當前連線狀態："+this.readyState);};
ws.onmessage = function(event){alert("接收到伺服器傳送的資料：rn"+event.data);};
ws.onclose = function(event){alert("已經與伺服器斷開連線rn當前連線狀態："+this.readyState);};
ws.onerror = function(event){alert("WebSocket異常！");};
} catch (ex) {
alert(ex.message);
}
};
 
function SendData() {
try{
ws.send("beston");
}catch(ex){
alert(ex.message);
}
};
 
function seestate(){
alert(ws.readyState);
}
</script>
</head>
<body>
<button id='ToggleConnection' type="button" onclick='ToggleConnectionClicked();'>連線伺服器</button><br /><br />
<button id='ToggleConnection' type="button" onclick='SendData();'>傳送我的名字：beston</button><br /><br />
<button id='ToggleConnection' type="button" onclick='seestate();'>檢視狀態</button><br /><br />
</body>
</html>


伺服器端程式碼：

 程式碼如下

using System;
using System.Net;
using System.Net.Sockets;
using System.Security.Cryptography;
using System.Text;
using System.Text.RegularExpressions;
 
namespace WebSocket
{
class Program
{
static void Main(string[] args)
{
int port = 1818;
byte[] buffer = new byte[1024];
 
IPEndPoint localEP = new IPEndPoint(IPAddress.Any, port);
Socket listener = new Socket(localEP.Address.AddressFamily,SocketType.Stream, ProtocolType.Tcp);
try{
listener.Bind(localEP);
listener.Listen(10);
 
Console.WriteLine("等待客戶端連線....");
Socket sc = listener.Accept();//接受一個連線
Console.WriteLine("接受到了客戶端："+sc.RemoteEndPoint.ToString()+"連線....");
//握手
int length = sc.Receive(buffer);//接受客戶端握手資訊
sc.Send(PackHandShakeData(GetSecKeyAccetp(buffer,length)));
Console.WriteLine("已經發送握手協議了....");
//接受客戶端資料
Console.WriteLine("等待客戶端資料....");
length = sc.Receive(buffer);//接受客戶端資訊
string clientMsg=AnalyticData(buffer, length);
Console.WriteLine("接受到客戶端資料：" + clientMsg);
 
//傳送資料
string sendMsg = "您好，" + clientMsg;
Console.WriteLine("傳送資料：“"+sendMsg+"” 至客戶端....");
sc.Send(PackData(sendMsg));
Console.WriteLine("演示Over!");
 
}
catch (Exception e)
{
Console.WriteLine(e.ToString());
}
}
 
/// <summary>
/// 打包握手資訊
/// </summary>
/// <param name="secKeyAccept">Sec-WebSocket-Accept</param>
/// <returns>資料包</returns>
private static byte[] PackHandShakeData(string secKeyAccept)
{
var responseBuilder = new StringBuilder();
responseBuilder.Append("HTTP/1.1 101 Switching Protocols" + Environment.NewLine);
responseBuilder.Append("Upgrade: websocket" + Environment.NewLine);
responseBuilder.Append("Connection: Upgrade" + Environment.NewLine);
responseBuilder.Append("Sec-WebSocket-Accept: " + secKeyAccept + Environment.NewLine + Environment.NewLine);
//如果把上一行換成下面兩行，才是thewebsocketprotocol-17協議，但居然握手不成功，目前仍沒弄明白！
//responseBuilder.Append("Sec-WebSocket-Accept: " + secKeyAccept + Environment.NewLine);
//responseBuilder.Append("Sec-WebSocket-Protocol: chat" + Environment.NewLine);
 
return Encoding.UTF8.GetBytes(responseBuilder.ToString());
}
 
/// <summary>
/// 生成Sec-WebSocket-Accept
/// </summary>
/// <param name="handShakeText">客戶端握手資訊</param>
/// <returns>Sec-WebSocket-Accept</returns>
private static string GetSecKeyAccetp(byte[] handShakeBytes,int bytesLength)
{
string handShakeText = Encoding.UTF8.GetString(handShakeBytes, 0, bytesLength);
string key = string.Empty;
Regex r = new Regex(@"Sec-WebSocket-Key:(.*?)rn");
Match m = r.Match(handShakeText);
if (m.Groups.Count != 0)
{
key = Regex.Replace(m.Value, @"Sec-WebSocket-Key:(.*?)rn", "$1").Trim();
}
byte[] encryptionString = SHA1.Create().ComputeHash(Encoding.ASCII.GetBytes(key + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"));
return Convert.ToBase64String(encryptionString);
}
 
/// <summary>
/// 解析客戶端資料包
/// </summary>
/// <param name="recBytes">伺服器接收的資料包</param>
/// <param name="recByteLength">有效資料長度</param>
/// <returns></returns>
private static string AnalyticData(byte[] recBytes, int recByteLength)
{
if (recByteLength < 2) { return string.Empty; }
 
bool fin = (recBytes[0] & 0x80) == 0x80; // 1bit，1表示最後一幀
if (!fin){
return string.Empty;// 超過一幀暫不處理
}
 
bool mask_flag = (recBytes[1] & 0x80) == 0x80; // 是否包含掩碼
if (!mask_flag){
return string.Empty;// 不包含掩碼的暫不處理
}
 
int payload_len = recBytes[1] & 0x7F; // 資料長度
 
byte[] masks = new byte[4];
byte[] payload_data;
 
if (payload_len == 126){
Array.Copy(recBytes, 4, masks, 0, 4);
payload_len = (UInt16)(recBytes[2] << 8 | recBytes[3]);
payload_data = new byte[payload_len];
Array.Copy(recBytes, 8, payload_data, 0, payload_len);
 
}else if (payload_len == 127){
Array.Copy(recBytes, 10, masks, 0, 4);
byte[] uInt64Bytes = new byte[8];
for (int i = 0; i < 8; i++){
uInt64Bytes[i] = recBytes[9 - i];
}
UInt64 len = BitConverter.ToUInt64(uInt64Bytes, 0);
 
payload_data = new byte[len];
for (UInt64 i = 0; i < len; i++){
payload_data[i] = recBytes[i + 14];
}
}else{
Array.Copy(recBytes, 2, masks, 0, 4);
payload_data = new byte[payload_len];
Array.Copy(recBytes, 6, payload_data, 0, payload_len);
 
}
 
for (var i = 0; i < payload_len; i++){
payload_data[i] = (byte)(payload_data[i] ^ masks[i % 4]);
}
return Encoding.UTF8.GetString(payload_data);
}
 
 
/// <summary>
/// 打包伺服器資料
/// </summary>
/// <param name="message">資料</param>
/// <returns>資料包</returns>
private static byte[] PackData(string message)
{
byte[] contentBytes = null;
byte[] temp = Encoding.UTF8.GetBytes(message);
 
if (temp.Length < 126){
contentBytes = new byte[temp.Length + 2];
contentBytes[0] = 0x81;
contentBytes[1] = (byte)temp.Length;
Array.Copy(temp, 0, contentBytes, 2, temp.Length);
}else if (temp.Length < 0xFFFF){
contentBytes = new byte[temp.Length + 4];
contentBytes[0] = 0x81;
contentBytes[1] = 126;
contentBytes[2] = (byte)(temp.Length & 0xFF);
contentBytes[3] = (byte)(temp.Length >> 8 & 0xFF);
Array.Copy(temp, 0, contentBytes, 4, temp.Length);
}else{
// 暫不處理超長內容
}
 
return contentBytes;
}
}
}


執行效果：

WebSocket使用教程 - 帶完整例項

使用的瀏覽器：

WebSocket使用教程 - 帶完整例項

疑問：如例項中

 程式碼如下
responseBuilder.Append("Sec-WebSocket-Accept: " + secKeyAccept + Environment.NewLine + Environment.NewLine);
//如果把上一行換成下面兩行，才是thewebsocketprotocol-17協議，但居然握手不成功，目前仍沒弄明白！
//responseBuilder.Append("Sec-WebSocket-Accept: " + secKeyAccept + Environment.NewLine);
//responseBuilder.Append("Sec-WebSocket-Protocol: chat" + Environment.NewLine);



這是為什麼呢？看到這篇博文的兄弟希望能夠給我解惑！







連線鍵盤 功能

什麼是”連線鍵盤“功能

”連線鍵盤“功能其實就是開通了網頁版的微信，利用鍵盤可以快速錄入文字聊天。

WebSocket使用教程 - 帶完整例項

連線方法很簡單，用手機開啟微信點選右上角魔術棒，會彈出三個選項，只用選擇連線鍵盤就可以了，這時用瀏覽器開啟wx.qq.com然後用手機掃描網頁中的二維碼即可開啟網頁版微信，而這時也就可以直接利用電腦鍵盤實現快速聊天了。


WebSocket-Server裡專案含義如下：

Mobile：手機模擬器，與手機通訊伺服器進行UDP通訊，負責提示開啟的頁面地址，並輸入GUID(相當於二維碼)與頁面進行繫結；
MobileServer：手機通訊伺服器，負責接收手機資訊(比如微信的賬戶資訊以及二維碼資訊)，此處接收GUID。並轉發至WebSocket通訊伺服器；
WebSocket：WebSocket通訊伺服器，與手機通訊伺服器和頁面的WebSocket進行通訊；

WebSocket-Client裡專案含義如下：

test.html：測試的web頁面(類似微信的wx.qq.com)；
jquery-1.8.0.min.js：jquery框架；


實現原理

頁面test.html生成GUID並存儲在WebSocket，手機模擬器輸入GUID並傳至WebSocket伺服器，在WebSocket伺服器檢索頁面Socket資訊並通訊。


注意事項

如果自己測試請根據上述步驟先啟動手機通訊伺服器和WebSocket通訊伺服器；
把所有是“10.9.146.31”的字串更換為自己的IP；

相關推薦

WebSocket協議詳解及應用

https://blog.csdn.net/u014520745/article/details/52639452   WebSocket協議詳解及應用(一)-初識WebSocket 一、什麼是WebSocket WebSocket是一個允許Web應用程式(通常指瀏覽器)與

WebSocket協議詳解

什麼是WebSocket？看過html5的同學都知道，WebSocket protocol 是HTML5一種新的協議。它是實現了瀏覽器與伺服器全雙工通訊(full-duplex)。HTML5定義了WebSocket協議，能更好的節省伺服器資源和頻寬並達到實時通訊。現在我們來

WebSocket資料包協議詳解

WebSocket協議主要分為兩部分,第一部分是連線許可驗證和驗證後的資料互動.連線許可驗證比較簡單,由Client傳送一個類似於HTTP的請求,服務端獲取請求後根據請求的KEY生成對應的值並返回.連線請求內容:12345678GET / HTTP/1.1Connection

網絡協議詳解

網絡協議 test 未能 第一個 為什麽 體系 index 緩存 hyper 目錄：：：：：： 一、網絡協議 二、TCP（Transmission Control Protocol，傳輸控制協議） TCP頭格式 TCP協議中的三次握手和四次揮手

HTTP協議詳解（真的很經典）

cnp 運用 web應用 media 服務器端 所有 長度 request bad 轉載：http://e7kan.com/?p=264& 引言 HTTP是一個屬於應用層的面向對象的協議，由於其簡捷、快速的方式，適用於分布式超媒體信息系統。它於1990年提出，經過幾

http協議詳解

表單 pos 換行 none 必須掌握 通信 pow print expires HTTP是一個屬於應用層的面向對象的協議，由於其簡捷、快速的方式，適用於分布式超媒體信息系統。它於1990年提出，經過幾年的使用與發展，得到不斷地完善和擴展。目前在WWW中使用的是HTTP/1

HTTP 協議詳解

範圍 文件傳輸 ext text 繼續 warn 分組 asi nsf 前言： 　　之前買過一本《圖解 HTTP》這本書，作者好像是個小日本，也繼承了小日本在動漫方面的天賦，30% 的內容都是 Q 版畫圖。 　　之後沒有引起我的重視，書一借出去，然後，之後 .. 之後，

Http 協議詳解筆記

code sps 網頁 提示 agent tor 指定 6.0 lec HTTP是一個屬於應用層的面向對象的協議，由於其簡捷、快速的方式，適用於分布式超媒體信息系統。它於1990年提出，經過幾年的使用與發展，得到不斷地完善和擴展。目前在WWW中使用的是HTTP/1.0的第六

HTTPS協議詳解(二)：TLS/SSL工作原理

-c 基本 公鑰加密 工作方式 通信 使用 sha2 公開 原理 HTTPS協議的主要功能基本都依賴於TLS/SSL協議，本節分析TLS/SSL協議工作原理。 TLS/SSL的功能實現主要依賴於三類基本算法：散列函數 Hash、對稱加密和非對稱加密，其利用非對稱加密實

HTTPS協議詳解(四)：TLS/SSL握手過程

其它 對數 hello 減少 受保護 改版 text gin 組裝 1、握手與密鑰協商過程 基於RSA握手和密鑰交換的客戶端驗證服務器為示例詳解TLS/SSL握手過程 再看一張手繪時序圖 (1).client_hello 客戶端發起請求，以明文傳輸請求信息，包

HTTPS協議詳解(三)：PKI 體系

客戶 判斷 節點 無法 三方 證書無效 進行 證書 roo 1、RSA身份驗證的隱患 身份驗證和密鑰協商是TLS的基礎功能，要求的前提是合法的服務器掌握著對應的私鑰。但RSA算法無法確保服務器身份的合法性，因為公鑰並不包含服務器的信息，存在安全隱患: 客戶端C和

FC協議詳解

fc標題索引本文出自 “一步一印，有印為證” 博客，謝絕轉載！FC協議詳解

RTSP協議詳解

5.1 handler 詳解 finally 運行 綁定 prot mage accepted RTSP簡介 RTSP（Real Time Streaming Protocol）是由Real Network和Netscape共同提出的如何有效地在IP網絡上傳輸流媒

（三）GET和POST協議詳解

str 打印 http 類別 多個 表現 pro 版本 prot 一、GET請求報文分析： 1、 請求行： 　　a) GET（描述該請求采用了什麽請求方法），HTTP協議中包含8種請求方法： GET 請求獲取Request-URI 所標識的資源 POST

HTTP協議詳解以及URL具體訪問過程

標記語言 初始化 折疊 code 文件類型 scheme 缺少 gif 其他瀏覽器 1、簡介 　　1.1、HTTP協議是什麽？ 　　即超文本傳輸協議（HTTP，HyperText Transfer Protocol)是互聯網上應用最為廣泛的一種網絡協議，所有的WWW文件都必

(轉)RTSP協議詳解

定義 attach highlight not xtend prev desc 設備 代理服 轉自：https://www.cnblogs.com/lidabo/p/6553212.html RTSP簡介 RTSP（Real Time Streaming Prot

第二章、IP協議詳解

32位 匹配 重新 連續 檢測 tcp crc校驗 變化 同步傳輸 一、IP服務的的特點 IP協議是TCP/IP協議族的動力，他為上層協議提供的無狀態無連接，不可靠的服務。 　　無狀態是指IP通信雙方不同步傳輸數據的狀態信息，因此所有的ip數據報的發送，傳出和接受都是相互獨

# 中小型網絡構建-vrrp協議詳解

中小型網絡構建中小型網絡構建-vrrp協議詳解 什麽是VRRP？虛擬路由冗余協議(Virtual Router Redundancy Protocol，簡稱VRRP)是由IETF提出的解決局域網中配置靜態網關出現單點失效現象的路由協議，1998年已推出正式的RFC2338協議標準。VRRP廣泛應用在邊緣網絡中

[PXE] linux（centos）PXE服務器搭建，安裝，啟動及pxe協議詳解

delet 不依賴 ons cat dhcp服務器 ftp local 子網 toc 本章Blog相關Linux知識點 工作環境中，想要安裝Linux但是計算機沒有光驅，或者是有大批量的計算機需要同時安裝Linux，就需要通過部署環境PXE+DHCP+TFTP+HTT

SPI協議詳解

unsigned 存儲器 tac 內容 acc inpu com nop 一個數 轉自：https://my.oschina.net/freeblues/blog/67400 1.SPI協議簡介 1.1.SPI協議概括 　　SPI，是英語Serial Peripheral