2. 程式人生 > >WebSocket使用教程 - 帶完整實例--網址：https://my.oschina.net/u/1266171/blog/357488

WebSocket使用教程 - 帶完整實例--網址：https://my.oschina.net/u/1266171/blog/357488

阿新 • • 發佈：2017-05-16
class 雙工 存在 數值 新浪 電腦 ssi enc 觸發

什麽是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 協議，由於這個協議目前還是處於草案階段，版本的變化比較快，我們選擇目前最新的 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;
}
}
}


運行效果：

技術分享

使用的瀏覽器：

技術分享

疑問：如實例中

代碼如下 復制代碼
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);



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







連接鍵盤 功能

什麽是”連接鍵盤“功能

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

技術分享

連接方法很簡單，用手機打開微信點擊右上角魔術棒，會彈出三個選項，只用選擇連接鍵盤就可以了，這時用瀏覽器打開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://my.oschina.net/u/1266171/blog/357488

相關推薦

WebSocket使用教程 - 帶完整實例--網址：https://my.oschina.net/u/1266171/blog/357488

class 雙工 存在 數值 新浪 電腦 ssi enc 觸發 什麽是WebSocket？看過html5的同學都知道，WebSocket protocol 是HTML5一種新的協議。它是實現了瀏覽器與服務器全雙工通信(full-duplex)。HTML5定義了WebSock

新部落格地址：https://my.oschina.net/hebaodan/blog/

思路： 按代價大小從高到低排序，代價一樣則最後期限早的在前， 按排序順序遍歷，事件安排進終止日期那一天，如果該日期已被那排，就在往前推， 如果最後安排不下，就扣分。 #include<iostream> #include<algorithm> us

深入圖解字符集與字符集編碼（三）——定長與變長（出處：http://my.oschina.net/goldenshaw/blog/307708）

☯，首先，這並不是圖片，這是一個unicode字元，Yin Yang，即陰陽符，碼點為U+262F。如果你的瀏覽器無法顯示，可以檢視這個連結http://www.fileformat.info/info/unicode/char/262f/index.htm。這與我們要討論的主題有何關係呢？下面我會談到。

WebSocket使用教程-帶完整例項

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

Java-Runoob-高級教程-實例-方法：09. Java 實例 – continue 關鍵字用法-un

pan 文件 語句 html 轉載 ear 一次 define padding ylbtech-Java-Runoob-高級教程-實例-方法：09. Java 實例 – continue 關鍵字用法 1.返回頂部

WCF系列教程之WCF實例化

說明 con bind () 應用程序 ebe 控制臺應用程序 alt .text 本文參考自http://www.cnblogs.com/wangweimutou/p/4517951.html,純屬讀書筆記,加深記憶 一、理解WCF實例化機制 1、WCF實例化,是指對用戶

python fabric模塊 生產環境dubbo代碼包發布管理完整實例

fabric 代碼包部署#!/usr/bin/env pythonimport osimport timeimport fabricfrom fabric.api import *from fabric.context_managers import *from fabric.colors import *f

BPM實例分享：如何設置表單字體樣式

ont bsp 版本 span 字體 important 文件 shee font 系統版本：V10.0 一些業務場景中，時爾需要改變表單字體 那如何設置表單字體樣式？ 本文將會針對全局表單和單個表單進行闡述！ 1、全局表單： 修改WFRES\CSS\MvcSheet.c

BPM實例分享：如何設置開窗高度與寬度？

解決方案 項目 如何 版本：V９.２.７ 問題描述：DropDown的開窗查詢中高度與寬度設置無效 解決方案：修改MvcSheetAll，具體修改文件位置在：/Portal/WFRes/_Scripts/MVCSheet/Controls/SheetTextBox.js修改內容如下圖： 備註：Ｈ

深入淺出JMS(四)--Spring和ActiveMQ整合的完整實例

訂閱 實例 schema -i 同步和異步 生產 技術分享 .com factor 第一篇博文深入淺出JMS(一)–JMS基本概念，我們介紹了JMS的兩種消息模型：點對點和發布訂閱模型，以及消息被消費的兩個方式：同步和異步，JMS編程模型的對象，最後說了JMS的優點。 第二

arduino實例1：led閃爍

arduino代碼：int led_0 = 13;void setup() { pinMode(led_0, OUTPUT);}void loop() { digitalWrite(led_0, HIGH); delay(1000); digitalWrite(led_0, LOW);

PHP連接數據庫實現多條件查詢與分頁功能——關於租房頁面的完整實例操作

ots cnblogs 信息 val 租房 btn earch 拼接 round 租房頁面如圖： 代碼如下： <!DOCTYPE html><html> <head> <meta charset="UTF-8"

Spring和ActiveMQ整合的完整實例

beans util caching consumer str blank prop ner 消息發送 Spring和ActiveMQ整合的完整實例 前言 這篇博文,我們基於Spring+JMS+ActiveMQ+Tomcat，做一個Spring4.1.0和Acti

使用C#創建及調用WCF完整實例 (Windows服務宿主)

targe fse 切換 目的 water fcm config文件 mark art 關於WCF的概念、原理、優缺點等，在這裏就不多說了，網上很多，可以自行搜索，比我解釋的要專業的多。 這裏直接說使用Windows 服務(Windows Service)作為宿主如何實現

seaJS簡介和完整實例

化工 area 初始化 完成 har 自動 end href out 什麽是 seaJS ？　　和requireJS相似的，seaJS 也是用JavaScript編寫的JS框架，主要功能是可以按不同的先後依賴關系對 JavaScript 等文件的進行加載工作，可簡單理解為J

C#實現排列組合算法完整實例

sts parent ons collect edi thumb img reader 組合 排列組合是常見的數學問題，本文就以完整實例形式講述了C#實現排列組合算法的方法。分享給大家供大家參考之用。具體方法如下： 首先，數學中排列組合,可表示為：排列P（N，R） 其實排

JS函數傳參實例應用：多組圖片切換實例

name 實現 nts box tel 文字 .cn back 先來 之前的博客有一個圖片切換的例子，實現了簡單輪播圖的點擊切換的案例，今天就說一下多組輪播切換，前提是布局差不多，通過函數傳參的形式減少代碼應用，但是同時還能實現效果。先來看一下之前那個例子的實現圖片： 那

Python編程練習題和答案實例二：關於數軸和長整型數據類型的練習。

for 利潤高 掌握 post pro 提問 編程 spa 100萬 Python練習題問題如下： 簡述：企業發放的獎金根據利潤提成。利潤(I)低於或等於10萬元時，獎金可提10%；利潤高於10萬元，低於20萬元時，低於10萬元的部分按10%提成，高於10萬元的部分，可提成

jQuery應用實例4：下拉列表

cde sub 列表 cto fun 華為 tle head alt 應用場景：左側是已有商品，右側是未有商品，選擇其中的內容點擊箭頭即可互換： 點擊大箭頭則全部內容去另一邊，或者雙擊已有商品的選項也會加入右邊： 代碼實現： <!DOCTYPE html>

jQuery應用實例5：表單驗證

ati itl www. type har 郵箱 size margin 錯誤提示 1.validation插件的使用： 入門案例： <html> <head> <meta charset="UTF-8">