C#採用Websocket實現同步通訊，遠程同步畫板操做（完成實現同步畫板演示，實時聊天，實時語音流推送）

時間 2021-08-12

標籤 javascript css html java web canvas 服務器 websocket markdown 網絡欄目 C# 简体版

原文原文鏈接

C# 如何實現網絡通訊，方法有不少就不一一介紹了。此處使用C#的Fleck來實現。

1、Fleck是什麼？它的做用是什麼，能夠實現什麼？javascript

Fleck是一個用C#實現的WebSocket服務器,256K小而精，功能強大。
從Nugget項目分支，Fleck不須要繼承、容器或其餘引用。

須要注意的是：Fleck不依賴HttpListener或HTTP.sys，
	        這意味着它將在Windows 7和Server 2008主機上工做。

首先建立一個工程項目SynView，在NuGet下載Fleck,Fleck大小隻有256K.

下載完成以後，此時項目中已經引入Fleck。css

引入命名空間：html

using Fleck;

//開啓debug日誌信息提示
FleckLog.Level = LogLevel.Debug;
根據需求實例化，開啓以後會有詳細的運行，錯誤等信息提示。

下面是一個向客戶機響應的示例。java

List<IWebSocketConnection> allSockets = new List<IWebSocketConnection>();
//此處IP地址（192.169.68.103:8866），端口均爲虛構地址，若有雷同純屬巧合
WebSocketServer server = new WebSocketServer("ws://192.169.68.103:8866");

server.Start(socket =>
{
     socket.OnOpen = () =>
     {
         //當有通信進行連接時就會打開一個通訊通道
         //socket會攜帶與之連接的http等信息，其中包含IP，端口，head信息等
         //添加進socket集合
         allSockets.Add(socket);
     };

     socket.OnClose = () =>
     {
         //關閉時進行移除與之斷開的socket
         allSockets.Remove(socket);
     };
     socket.OnMessage = (message) =>
     {
         //主控端發來消息，此處再發送給被控端
         //此處未進行IP過濾，信息會進行羣發。全部此時連接的IP均會收到這個message信息。
         allSockets.ToList().ForEach(s => s.Send(message));
     };
 });

=此時服務器端通訊已經完成（此處起到一箇中間站的做用）==web

1. 而後咱們在已經創建websocket站點的狀況下實現第一個功能：遠程同步畫板
（1）、建立一個html項目，例如index.html. 既然是畫板那麼就須要使用畫布canvas
如：canvas

<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width" />
		<title>同步畫板演示</title>
		<style type="text/css">
			canvas {
				position: absolute;
				box-shadow: 1px 1px 10px 3px #5c5555;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
			}
		</style>
	</head>
	<body>
			<canvas id="canvas" width="800" height="900"></canvas>
	</body>
</html>