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

時間 2021-08-12

標籤 css html web canvas c# 服務器 websocket 網絡 app socket 欄目 C# 简体版

原文原文鏈接

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

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

一、Fleck是一個用C#實現的WebSocket服務器,256K小而精，功能強大。html

二、從Nugget項目分支，Fleck不須要繼承、容器或其餘引用。

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

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

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

引入命名空間：c#

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

下面是一個向客戶機響應的示例。
服務器

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));
     };
 });

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

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

這裏建立了一個800×900像素自適應居中的畫布，效果如圖：app

補充：如何實現鼠標在畫布上進行繪圖。socket

分爲三步

第一步：鼠標點下去繪製起點

第二步：鼠標移動開始按照鼠標軌跡點繪製隨意的座標點軌跡

第三步：鼠標擡起來中止繪製

2. 接下來實現第二個功能：實時聊天

3. 如今實現最後一個功能：實時語音流推送（語音聊天