最近使用的web項目中，需要服務器直接觸發前端顯示效果。
所以研究了一下websocket:
名詞解釋：
WebSocket
WebSocket協議是一種雙向通信協議，它建立在TCP之上，同http一樣通過TCP來傳輸數據，但是它和http最大的不同有兩點：
1.WebSocket是一種雙向通信協議，在建立連接后，WebSocket服務器和Browser/UA都能主動的向對方發送或接收數據，就像Socket一樣，不同的是WebSocket是一種建立在Web基礎上的一種簡單模擬Socket的協議；
2.WebSocket需要通過握手連接，類似於TCP它也需要客戶端和服務器端進行握手連接，連接成功后才能相互通信。
當Web應用程序調用new WebSocket(url)接口時，Browser就開始了與地址為url的WebServer建立握手連接的過程。
客戶端向服務器發送請求：
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: xsOSgr30aKL2GNZKNHKmeT1qYjA=
請求中的【Sec-WebSocket-Key】是隨機發送的。而服務器返回的【Sec-WebSocket-Accept】是將【Sec-WebSocket-Key】加上一個固定字符串【258EAFA5-E914-47DA-95CA-C5AB0DC85B11】，並使用SHA-1加密后，再進行BASE-64編碼生成的。
一個簡單的DEMO:
前端頁面:
<!DOCTYPE html>
<html>
<head>
<title>Web Socket Client</title>
</head>
<body style="padding:10px;">
<h1>聊天室</h1>
<div style="margin:5px 0px;">
Address:
<div><input id="address" type="text" value="ws://127.0.0.1:1818" style="width:400px;" /></div>
</div>
<div style="margin:5px 0px;">
Name:
<div><input id="name" type="text" value="Byron" style="width:400px;" /></div>
</div>
<div>
<button id="connect" onclick="connect();">connect server</button>
<button id="disconnect" onclick="quit();">disconnect</button>
<button id="clear" onclick="clearMsg();">clear</button>
</div>
<h5 style="margin:4px 0px;">Message:</h5>
<div id="message" style="border:solid 1px #333; padding:4px; width:400px; overflow:auto;
background-color:#404040; height:300px; margin-bottom:8px; font-size:14px;">
</div>
<input id="text" type="text" onkeypress="enter(event);" style="width:340px" />
<button id="send" onclick="send();">send</button>
<script type="text/javascript">
var name=document.getElementById('name').value;
var msgContainer=document.getElementById('message');
var text=document.getElementById('text');
function connect () {
var address=document.getElementById('address').value;
ws=new WebSocket(address);
ws.onopen=function(e){
var msg=document.createElement('div');
msg.style.color='#0f0';
msg.innerHTML="Server > connection open.";
msgContainer.appendChild(msg);
ws.send('{'+document.getElementById('name').value+'}');
};
ws.onmessage=function(e){
var msg=document.createElement('div');
msg.style.color='#fff';
msg.innerHTML=e.data;
msgContainer.appendChild(msg);
};
ws.onerror=function(e){
var msg=document.createElement('div');
msg.style.color='#0f0';
msg.innerHTML='Server > '+e.data;
msgContainer.appendChild(msg);
};
ws.onclose=function(e){
var msg=document.createElement('div');
msg.style.color='#0f0';
msg.innerHTML="Server > connection closed by server.";
msgContainer.appendChild(msg);
};
text.focus();
}
function quit(){
if(ws){
ws.close();
var msg=document.createElement('div');
msg.style.color='#0f0';
msg.innerHTML='Server > connection closed.';
msgContainer.appendChild(msg);
ws=null;
}
}
function send(){
ws.send(text.value);
setTimeout(function(){
msgContainer.scrollTop=msgContainer.getBoundingClientRect().height;
},100);
text.value='';
text.focus();
}
function clearMsg(){
msgContainer.innerHTML="";
}
function enter(event){
if(event.keyCode==13){
send();
}
}
</script>
</body>
</html>
后台代碼（C#):
class Program
{
private static Socket listener;
private static Hashtable ht;
static void Main(string[] args)
{
int port = 1818;//監聽端口為1818端口
ht = new Hashtable();//用於存放客戶端的連接socket
byte[] buffer = new byte[1024];
var localEP = new IPEndPoint(IPAddress.Any, port);
listener = new Socket(localEP.Address.AddressFamily, SocketType.Stream, ProtocolType.Tcp);
try
{
listener.Bind(localEP);
listener.Listen(10);
Console.WriteLine("等待客戶端連接....");
while (true)
{
Socket clientSocket = listener.Accept(); //接收到客戶端的連接
var th = new Thread(new ParameterizedThreadStart(Receive));
th.Start(clientSocket);
}
}
catch (Exception e)
{
Console.WriteLine(e.ToString());
}
}
/// <summary>
/// 線程調用
/// </summary>
private static void Receive(object o)//Socket clientSocket)
{
Socket clientSocket = (Socket)o;
clientSocket.Blocking = true;
IPEndPoint clientipe = (IPEndPoint)clientSocket.RemoteEndPoint;
// Console.WriteLine("[" + clientipe.Address.ToString() + "] Connected");
var key = string.Format("{0}-X-Q-X-{1}", clientipe.Address.ToString(), clientipe.Port);
if (!ht.ContainsKey(key))
{
//將ip地址設置為hashTable的key值 若hashTable中存在該ip地址則不再ht中添加socket以免發送重復數據
ht.Add(key, clientSocket);
}
Console.WriteLine("接收到了客戶端：ip" + clientSocket.RemoteEndPoint.ToString() + "的連接");
byte[] buffer = new byte[1024];
int length = clientSocket.Receive(buffer);
clientSocket.Send(PackHandShakeData(GetSecKeyAccetp(buffer, length)));
Console.WriteLine("已經發送握手協議了....");
//接收用戶姓名信息
length = clientSocket.Receive(buffer);
string xm = AnalyticData(buffer, length);
clientSocket.Send(PackData("連接時間：" + DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss")));
try
{
while (true)
{
var errLs = new List<object>();
//接受客戶端數據
Console.WriteLine("等待客戶端數據....");
try
{
length = clientSocket.Receive(buffer);//接受客戶端信息
}
catch (SocketException e)
{
//去除字典
Console.WriteLine(e.Message);
try
{
foreach (DictionaryEntry de in ht)
{
if (de.Value == clientSocket)
{
ht.Remove(de.Key);
}
}
}
catch (Exception ex)
{
Console.WriteLine(ex.Message);
}
}
string clientMsg = AnalyticData(buffer, length);
Console.WriteLine("接受到客戶端數據：" + clientMsg);
//發送數據
string sendMsg = "" + clientMsg;
Console.WriteLine("發送數據：“" + sendMsg + "” 至客戶端....");
//遍歷hashTable中的數據獲取Socket發送數據
foreach (DictionaryEntry de in ht)
{
try
{
var sc = (Socket)de.Value;
sc.Send(PackData(clientSocket.RemoteEndPoint.ToString() + xm + "說：" + sendMsg));
}
catch (Exception e)
{
Console.WriteLine("Num:{0} err:{1}", ht.Count, e);
errLs.Add(de.Key);
}
}
if (errLs != null && errLs.Any())
{
foreach (var item in errLs)
{
ht.Remove(item);
}
}
Thread.Sleep(1000);
}
}
catch (SocketException e)
{
//去除字典
Console.WriteLine(e.Message);
}
catch (System.ObjectDisposedException e)
{
//去除字典
Console.WriteLine(e.Message);
}
catch (Exception e)
{
Console.WriteLine(e.Message);
}
}
/// <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:(.*?)\r\n");
Match m = r.Match(handShakeText);
if (m.Groups.Count != 0)
{
key = Regex.Replace(m.Value, @"Sec\-WebSocket\-Key:(.*?)\r\n", "$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;
}
}
運行效果：
