2. 程式人生 > >Java/HTML5 WebSocket詳解

Java/HTML5 WebSocket詳解

阿新 • • 發佈：2019-02-03

什麼是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 上都得到比較好的支援。通過描述可以看到握手協議

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

 程式碼如下
1
    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


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

 程式碼如下
1
    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來簡單呼叫即可，而伺服器端是要自己實現的，伺服器端將在下個博文來講。

 程式碼如下
1 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呼叫瀏覽器介面例項如下：

 程式碼如下
1
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，不用官方實現，我們自己來寫個簡單的。伺服器端需要根據協議來握手、接收和傳送。


握手

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

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

 程式碼如下
1 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


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

 程式碼如下
1 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；

例項程式碼如下：

 程式碼如下
1
/// <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做異或操作。

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

 程式碼如下
1
/// <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陣列。

程式碼如下：

 程式碼如下
1
/// <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請另看相關知識。

客戶端程式碼：

 程式碼如下
1
<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>


伺服器端程式碼：

 程式碼如下
1
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使用教程 - 帶完整例項

疑問：如例項中

 程式碼如下
1 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；

相關推薦

Java/HTML5 WebSocket詳解

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

java.util包詳解（二）——Connection接口

操作 相同 元素 叠代 cat roo soft true nbsp Connection接口介紹 　　Connection接口是java集合的root接口，沒有實現類，只有子接口和實現子接口的各種容器。主要用來表示java集合這一大的抽象概念。 　　Connection接

java對象詳解

add splay view created 元素 繼承關系 外部 優化 csdn java對象詳解 內存布局 普通對象布局 數組的內存布局 內部類的內存布局 對象分解 對象頭-mark word（8字節) 實例數據 對齊填充(可選) java鎖分析

Java泛型詳解

對象數組 整形 泛型方法 tty 接受 一個 div -m color 泛型的本質是參數化類型，也就是說所操作的數據類型被指定為一個參數。 假定我們有這樣一個需求：寫一個排序方法，能夠對整形數組、字符串數組甚至其他任何類型的數組進行排序，該如何實現？ 答案是可以使用 Ja

Java常量池詳解

回收 array 數值 編譯期 二進制格式 new 保持 占用 get 轉自：http://www.cnblogs.com/iyangyuan/p/4631696.html jvm虛擬內存分布圖： 程序計數器：JVM執行程序的流水線。 本地方法棧：JVM調用操作系統方法所

Java線程詳解(一)

線程 thread runnable 程序、進程、線程的概念 程序(program)：是為完成特定任務、用某種語言編寫的一組指令的集合。即指一段靜態的代碼，靜態對象。 進程(process)：是程序的一次執行過程，或是正在運行的一個程序。動態過程：有它自身的產生、存在和消亡的過程。 如

Java反射機制詳解一

java 反射 反射機制 工廠模式 1反射機制是什麽反射機制是在運行狀態中，對於任意一個類，都能夠知道這個類的所有屬性和方法；對於任意一個對象，都能夠調用它的任意一個方法和屬性；這種動態獲取的信息以及動態調用對象的方法的功能稱為java語言的反射機制。在面向對象的世界裏，萬事萬物皆對象.在ja

JAVA環境配置詳解

指向 微軟 ssp cep 解釋 引入 bin testcase loader 步驟：一下載安裝JDK（註意版本）二配置環境變量 JAVA_HOME：JDK的安裝路徑 CLASSPATH：.;%JAVA_HOME%\lib;%JAVA_HOME%\lib\too

Java反射機制詳解

ride length 數組大小 conf array arraycopy 動態調用 ray info Java反射機制詳解 |目錄 1反射機制是什麽 2反射機制能做什麽 3反射機制的相關API ·通過一個對象獲得完整的包名和類名 ·實例化Class類對象 ·獲

java虛擬機詳解

image 種類 棧的操作 cms gc float align pool 不定 記錄 註： 此篇文章可以算是讀《深入理解Java虛擬機：JVM高級特性與最佳實踐》一書後的筆記總結加上我個人的心得看法。 整體總結順序沿用了書中順序，但多處章節用自己的話或直白或擴展的進行

java 常量池詳解

例如 ava color str blog 註意 如果 .cn 運行 參考資料：http://www.cnblogs.com/holos/p/6603379.html 註意： 1.首先，我們平時在討論字符串新建問題時所說的常量池其實指的是全局字符串常量池。並不是運行時常量池

Java虛擬機詳解——JVM常見問題總結

can 語言 嘗試 意思 是把 fff rom com serial 【正文】 聲明：本文只是做一個總結，有關jvm的詳細知識可以參考之前的系列文章，尤其是那篇：Java虛擬機詳解04—-GC算法和種類。那篇文章和本文是面試時的重點。 面試必問關鍵詞：JVM垃圾回收、類加載

java設計模式詳解

創建對象 single 代理模式 man server pre factory 行為型模式 代理 設計模式： 設計模式(Design Pattern)是一套被反復使用、多數人知曉的、經過分類編目的、代碼設計經驗的總結，使用設計模式是為了可重用代碼、讓代碼更容易被他人理解並且

Java Static關鍵字詳解

會有 java 非靜態屬性 指向 style 關於 區域 當前 為什麽 先思考兩個問題： 1.為什麽要使用Static關鍵字？ 2.加了Static關鍵字修飾後會有什麽不同？ Static 一.為什麽要使用Static關鍵字？ 這裏摘錄一下《Java編程思想(第四版)

java Random類詳解

代碼實現 java 取余 ext deb 簡單 pri nbsp false java Random類位於java.util包下，主要用來生成隨機數，本文詳解介紹了Random類的用法，希望能幫到大家 Random類 (java.util) Random類中

Java技術——Java泛型詳解（轉）

cal 5.1 try 既然 參數 top 兩種 泛型編程 編譯器 1．為什麽需要泛型轉載請註明出處：http://blog.csdn.net/seu_calvin/article/details/52230032泛型在Java中有很重要的地位，網上很多文章羅列各種理論，不

Java 驗證碼詳解

hash rand map builder white form fixed sys ssi 　　1 使用Servlet實現驗證碼，涉及的知識點主要為java 繪圖技術與session保存數據。 　　 HTML頁面 1 <html> 2 &l

Java集合框架詳解

dha put 同時 列表 true 是個 獲取 pac .com 一、集合框架圖 簡化圖： 說明：對於以上的框架圖有如下幾點說明 1.所有集合類都位於java.util包下。Java的集合類主要由兩個接口派生而出：Collection和Map，Collection和M

WebSocket詳解（一）：初步認識WebSocket技術

tcp 客戶端 應用程序 需要 應用層協議 通過 新的 sock org 1.什麽是Socket？什麽是WebSocket？ 對於第1次聽說WebSocket技術的人來說，兩者有什麽區別？websocket是僅僅將socket的概念移植到瀏覽器中的實現嗎？我們知道，在網絡中

Java Calender 類詳解

年份 english mar 不同 獲取 spell arc november 月份 一、 如何創建 Calendar 對象 Calendar 是一個抽象類, 無法通過直接實例化得到對象. 因此, Calendar 提供了一個方法 getInstance,來獲得一個Ca