WebSocket 是 HTML5 開始提供的一種在單個 TCP 連接上進行全雙工通訊的協議。
WebSocket 使得客戶端和服務器之間的數據交換變得更加簡單,允許服務端主動向客戶端推送數據。在 WebSocket API 中,瀏覽器和服務器只需要完成一次握手,兩者之間就直接可以創建持久性的連接,並進行雙向數據傳輸。
在 WebSocket API 中,瀏覽器和服務器只需要做一個握手的動作,然后,瀏覽器和服務器之間就形成了一條快速通道。兩者之間就直接可以數據互相傳送。
今天在這里我會用C#搭建WebSocket服務端演示WebSocket的通信過程
一、WebSocket中的事件、屬性和方法
屬性:
Socket.readyState 只讀屬性 readyState 表示連接狀態,可以是以下值: 0 - 表示連接尚未建立。 1 - 表示連接已建立,可以進行通信。 2 - 表示連接正在進行關閉。 3 - 表示連接已經關閉或者連接不能打開。
Socket.bufferedAmount 只讀屬性 bufferedAmount 已被 send() 放入正在隊列中等待傳輸,但是還沒有發出的 UTF-8 文本字節數
事件:
事件 事件處理程序 描述
open Socket.onopen 連接建立時觸發
message Socket.onmessage 客戶端接收服務端數據時觸發
error Socket.onerror 通信發生錯誤時觸發
close Socket.onclose 連接關閉時觸發
方法:
Socket.send() 使用連接發送數據
Socket.close() 關閉連接
二、有了大概的了解接下來就開始實現這么一個實例
1.客戶端
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body >
<div style="margin-left: 650px;">
<form id="Form">
<input type="input" name="" id="SendInfo" value="" />
<button type="submit">提交</button>
</form>
<div id="hello" style="border: dashed 1px black;height: 500px;width: 500px;margin-top: 10px;">
</div>
</div>
</body>
<script type="text/javascript">
var test=function(){
var print=document.getElementById('hello');
var form = document.getElementById('Form');
var input = document.getElementById('SendInfo');
print.innerHTML += "connecting to server ..<br/>";
window.ws = new WebSocket('ws://localhost:9898/'); //監聽webscoket服務端口
//監聽消息狀態
ws.onmessage=function(eve){
print.innerHTML+=eve.data+'<br/>'
}
//監聽鏈接狀態
ws.onopen=function(){
print.innerHTML+='connection open <br/>'
}
//監聽關閉狀態
ws.onclose = function () {
print.innerHTML += 'connection closed<br/>';
}
//向服務器端發送消息
form.addEventListener('submit',function(e){
e.preventDefault();
var val="客戶端:"+input.value;
ws.send(val);
input.value="";
})
}
window.onload=test();
</script>
</html>
2.服務端創建一個C#控制台程序
using Fleck; using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; namespace WebScoket { class Program { static void Main(string[] args) { var allScokets = new List<IWebSocketConnection>(); var server = new WebSocketServer("ws://127.0.0.1:9898"); //創建webscoket服務端實例 server.Start(scoket=> { scoket.OnOpen = () => { Console.WriteLine("Open"); allScokets.Add(scoket); }; scoket.OnClose = () => { Console.WriteLine("Close"); allScokets.Remove(scoket); }; scoket.OnMessage =message => { Console.WriteLine(message); allScokets.ToList().ForEach(s=>s.Send(message)); }; }); var input = Console.ReadLine(); while (input != "exit") { foreach (var socket in allScokets.ToList()) { socket.Send("服務端:"+input); } input = Console.ReadLine(); } } } }
3.運行效果

