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>

这里建立了一个800×900像素自适应居中的画布，效果如图：

补充：如何实现鼠标在画布上进行绘图。
分为三步
       第一步：鼠标点下去绘制起点
       第二步：鼠标移动开始按照鼠标轨迹点绘制随意的坐标点轨迹
       第三步：鼠标抬起来中止绘制服务器

2. 接下来实现第二个功能：实时聊天websocket

3. 如今实现最后一个功能：实时语音流推送（语音聊天）markdown