WebSocket 是 HTML5 開始提供的一種在單個 TCP 連接上進行全雙工通訊的協議。 WebSocket 使得客戶端和伺服器之間的數據交換變得更加簡單,允許服務端主動向客戶端推送數據。在 WebSocket API 中,瀏覽器和伺服器只需要完成一次握手,兩者之間就直接可以創建持久性的連接, ...
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.運行效果