WebSocket使用教程 - 帶完整實例

時間  2019-11-18
標籤 websocket 使用 教程 完整 實例 简体版
原文   原文鏈接
什麼是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 上都獲得比較好的支持。經過描述能夠看到握手協議

客戶端發到服務器的內容:javascript

 代碼以下 複製代碼

    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


從服務器到客戶端的內容:php

 代碼以下 複製代碼

    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來簡單調用便可，而服務器端是要本身實現的，服務器端將在下個博文來說。html

 代碼以下 複製代碼
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調用瀏覽器接口實例以下：html5

 代碼以下 複製代碼

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，不用官方實現，咱們本身來寫個簡單的。服務器端須要根據協議來握手、接收和發送。


握手

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

客戶端發到服務器的內容:java

 代碼以下 複製代碼
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


 
從服務器到客戶端的內容:node

 代碼以下 複製代碼
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；

實例代碼以下：jquery

 代碼以下 複製代碼

/// <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-rsv一、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作異或操做。

解析代碼以下，但沒有處理多幀和不包含掩碼的包：web

 代碼以下 複製代碼

/// <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；

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程