C#采用Websocket实现同步通信,远程同步画板操作(完成实现同步画板演示,实时聊天,实时语音流推送)

C# 如何实现网络通信,方法有很多就不一一介绍了。此处使用C#的Fleck来实现。

一、Fleck是什么?它的作用是什么,可以实现什么?

  1. Fleck是一个用C#实现的WebSocket服务器,256K小而精,功能强大。
  2. 从Nugget项目分支,Fleck不需要继承、容器或其他引用。
需要注意的是:Fleck不依赖HttpListener或HTTP.sys,
	        这意味着它将在Windows 7Server 2008主机上工作。

首先创建一个工程项目SynView,在NuGet下载Fleck,Fleck大小只有256K.
C#采用Websocket实现同步通信,远程同步画板操作(完成实现同步画板演示,实时聊天,实时语音流推送)_第1张图片
下载完成之后,此时项目中已经引入Fleck。

引入命名空间:

using Fleck;
//开启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));
     };
 });

=此时服务器端通信已经完成(此处起到一个中间站的作用)==

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像素自适应居中的画布,效果如图:
C#采用Websocket实现同步通信,远程同步画板操作(完成实现同步画板演示,实时聊天,实时语音流推送)_第2张图片
补充:如何实现鼠标在画布上进行绘图。
分为三步
       第一步:鼠标点下去绘制起点
       第二步:鼠标移动开始按照鼠标轨迹点绘制随意的坐标点轨迹
       第三步:鼠标抬起来停止绘制

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

3. 现在实现最后一个功能:实时语音流推送(语音聊天)

你可能感兴趣的:(websocket)