Qt网络编程电子白板

2018-08-11 08:44:04 天行健_地势坤阅读数 915更多

分类专栏： Qt

本文链接：https://blog.csdn.net/hfuu1504011020/article/details/81582731

大家好，今天我们介绍下在Ubuntu环境中用Qt-Creator设计网络电子白板，所谓的电子白板就是指在网络上通过客户端与服务器进行图元的绘画，然后由服务端广播出去发送到多个客户端上，从而实现图元绘画的同步性，这里我们只简单介绍下客户端与服务端，后面会贴出下载链接，供大家学习进步。

对于客户端的实现分为连接处理，登陆界面，绘画界面，响应事件的处理，连接我们用了TCP协议，界面我们使用了Qt的图形视图框架，不太了解的同学可以先学习下，对于服务端基本就是连接客户端，接受客户端的消息处理后再返回给客户端，对于接受发送消息，我们都用的是json保存，下面我们来看下已做好的小程序。

本人也处于刚入手阶段，在登陆界面目前有用户姓名以及join按钮框，用户姓名可以修改，加入之后可以在服务端看到加入者的一些消息，在加入之前确保已运行服务端，并同时确定需要加入客户端的个数，让多个客户端处于以下状态之一即可

下图中黑色框是已运行的服务端，在黑色框下面是两个客户端，若有需要你可以运行多个客户端。左一客户端是姓名为liang暂未登陆的用户，右一的客户端是姓名为Mary并已成功登陆的用户，成功登陆的用户会跳转到绘图界面并同时在服务器中打印出它登陆的消息（注意：在成功登陆后不可进行图元的绘制，必须等所有用户均加入后方可绘制图元，否则其余用户会加入失败，若不小心进行了误操作，那不好意思，麻烦你先重启服务端后再加入客户端进行操作）。

下面我们介绍绘图界面，对于绘图界面从左到右的图元依次为 直线、矩形、椭圆、三角形、随意绘画、删除上个图元、清除所有图元，默认开始选择的图元是绘画直线。如下图现在两个客户端均已登陆成功进入绘图界面，服务器显示两个客户端消息，消息显示的是加入者的姓名，加入者的id，主机地址，port,右一为Mary，左一为liang，

现在我们进行图元的绘制，如下图，首先我们在右一用户为Mary（id为1）的界面下绘制直线，此时可以看到服务端的消息打印，creator 为1，type 为”add“，图元type为“line”，通过json接受Mary的消息进行处理后广播到其他的客户端，此时我们能明显看到liang的客户端也打印出一样的直线。

如下图现在我们在liang（id为2）的客户端中绘制椭圆，选中椭圆的图元后绘制，此时能看到服务端的消息，ceator为2，type为"add" ，图元"type"为"oval"，同样的在Mary（id为1）的客户端中显示了椭圆图元。

后面添加矩形，三角形，随意绘画步骤基本一致，现在看下删除上一个图元的过程，首先我们把五个类型图元都添加进绘图框中，服务端打印出的消息有点多，因为对于随意绘画的这个图元，我们需要记录鼠标按下抬起时所有点的坐标。

这里我们加入图元的顺序是直线、椭圆、矩形、三角形、随意绘画，当我们删除上个图元时首先删除的自然是随意绘画的一部分，接着我们继续点击删除按钮，就继续按顺序往上删除，直至所有图元被删除，回到起始状态，这里演示下删除随意绘画出的“亮”这个子的最后一笔，其他图元删除大家可下载后自己玩一玩额，嘻嘻，对了，每个客户端的删除按钮都可以删除上个图元，这里我虽然是在liang（id为2）的客户端绘制的最后的一个图元，但删除我是在Mary（id为1）的客户端进行的。服务端的消息是type为“delete” ，global_id为12，这里的global_id指的是删除第几个图元，“亮”这个字我在随意绘制时绘制了八笔（有点尴尬，亮实际是九笔额，不好意思啊！）即八个图元，加上之前的四个图元，刚好十二个图元，而我们删除的刚好是最后一个，后面若是继续点击删除就是第十一个、第十个..............。

现在我们看下最后一个按钮，即清除所有图元，这个没有什么好说的，就是初始化到最初为NULL的状态（注意：若要退出整个程序需要清理所有的图元，否则会造成部分内存问题（程序错误），若你想再此运行客户端连接服务端就会出现连接异常，那这时候就不好意思了，你得重启服务端后再来连接客户端了）。在你退出整个程序前，我这里会有一个提示。如下图所示，若你未清理所有图元，麻烦你点击返回清理所有图元后再退出，之后你就可以重新开启更多或更少客户端来继续运行程序而不必重启服务器。

操作过程以及注意的事项基本就这些了，下面我们来看下下载服务端以及客户端的过程。

这里提供两种方式：

一、将下面链接中服务端以及客户端都下载下来，在自己的本机上进行运行试验，比较局限性，可在同一局域网下进行

链接：https://pan.baidu.com/s/1OFMLMG74B1mkJgC6BuMCYA 密码：745r

二、本服务端已搭建在腾讯云服务器上，可以直接点击下方的链接下载客户端，可在其他地方使用,局限性小。但本人的云服务器不太稳定，加上他人的一些误操作，不可能及时操作服务端修正错误。还是建议大家使用方法一下载服务端客户端自己运行。

链接：https://pan.baidu.com/s/1QtKpAsoGRge3Lk6Pw9Bj-A 密码：t076

下载好文件后解压运行其中的.exe文件即可，

总结：好了，本人也是小白一枚，很多地方也不会，但我的老师说过一句话，我觉得特别在理，他说：”我们搞程序的，就是磨出来的，每天磨一点，就进步些，磨的时间久了，也就都会了“，的确，也是如此。至于上面的步骤大家有什么操作不明确，欢迎在下方评论，对于文中的那两处注意的地方，要是有好的解决方法，评论留言，大家一起学习进步。其他的也不多说了。

客户端、服务端源码下载链接

链接：https://download.csdn.net/download/hfuu1504011020/10597167

Qt网络编程电子白板相关推荐

[Qt教程] 第31篇网络（一）Qt网络编程简介
[Qt教程] 第31篇网络(一)Qt网络编程简介楼主发表于 2013-8-28 17:04:17 | 查看: 515| 回复: 0 Qt网络编程简介版权声明该文章原创于作者yafeilin ...
Qt网络编程之实例一GET方式
看了两天的Qt网络编程,其实主要就是看了看QNetworkAccessManager.QNetworkRequest和QNetworkReply这三个类的主要内容.在之前,Qt网络编程主要是使用QHt ...
qt android 网络编程实例,QT网络编程Tcp下C/S架构的即时通信实例
先写一个客户端,实现简单的,能加入聊天,以及加入服务器的界面. #ifndef TCPCLIENT_H #define TCPCLIENT_H #include #include #include # ...
Qt网络编程——TCP
Qt网络编程--TCP 1. 概念 2. 服务器 3. 客户端 4. TCP服务器和客户端互传文件 5. 资源下载 1. 概念 TCP(Transmission Control Protocol, 传 ...
Qt网络编程实战之HTTP服务器-安晓辉-专题视频课程
Qt网络编程实战之HTTP服务器-30196人已学习课程介绍设计了一个实用的HTTP服务器,基于Qt的网络框架实现.先详细介绍Qt的网络.IO.线程..自定义事件.配置文件等类库的 ...
qt网络编程之使用cookie和ssl
文章目录所使用的Qt版本:5.14.0 接收Cookies: 发送Cookies: 答案是:有7个(有多少个等号就有多少个cookie,每个cookie用 ; 分隔开来) 代码如下: 参考: 简述 ...
第十四章：Qt网络编程
回顾: 第一章:Qt的概述第二章:在Ubuntu编写第一个Qt程序第三章:Qt的字符串和字符编码第四章:Qt的信号和槽第五章:Qt容器窗口(父窗口) 第六章:面向对象的Qt编程第七章:Qt设 ...
Qt网络编程概述（一）
分享主题 Qt网络编程概述(一) Qt网络编程之QTCPSocket和QTCPServer实例(二) Qt网络编程之QUdpSocket实例(三) Qt网络编程概述 QtNetWork模块提供了若干类 ...
Qt网络编程-简易版UDP组播通信入门Demo（5）
Qt网络编程-简易版UDP组播通信入门Demo(5)

Qt网络编程电子白板

Qt网络编程电子白板

Qt网络编程电子白板相关推荐

最新文章

热门文章