3、Qt Project之Socket网络编程

Socket网络编程

 Step1：首先完成整个界面的设计

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>MainWindow</class>
 <widget class="QMainWindow" name="MainWindow">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>421</width>
    <height>533</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>MainWindow</string>
  </property>
  <widget class="QWidget" name="centralWidget">
   <widget class="QLineEdit" name="IP_Address">
    <property name="geometry">
     <rect>
      <x>30</x>
      <y>140</y>
      <width>113</width>
      <height>27</height>
     </rect>
    </property>
   </widget>
   <widget class="QLabel" name="label_4">
    <property name="geometry">
     <rect>
      <x>20</x>
      <y>100</y>
      <width>171</width>
      <height>21</height>
     </rect>
    </property>
    <property name="font">
     <font>
      <pointsize>10</pointsize>
      <italic>true</italic>
      <underline>false</underline>
      <strikeout>false</strikeout>
     </font>
    </property>
    <property name="cursor">
     <cursorShape>BlankCursor</cursorShape>
    </property>
    <property name="text">
     <string>Designed by : mm1994uestc</string>
    </property>
    <property name="alignment">
     <set>Qt::AlignCenter</set>
    </property>
   </widget>
   <widget class="QLabel" name="label_6">
    <property name="geometry">
     <rect>
      <x>0</x>
      <y>-10</y>
      <width>321</width>
      <height>51</height>
     </rect>
    </property>
    <property name="font">
     <font>
      <pointsize>28</pointsize>
      <italic>true</italic>
      <underline>false</underline>
      <strikeout>false</strikeout>
     </font>
    </property>
    <property name="cursor">
     <cursorShape>BlankCursor</cursorShape>
    </property>
    <property name="text">
     <string>Qt interface Demo!</string>
    </property>
    <property name="alignment">
     <set>Qt::AlignCenter</set>
    </property>
   </widget>
   <widget class="QLabel" name="label_5">
    <property name="geometry">
     <rect>
      <x>0</x>
      <y>40</y>
      <width>171</width>
      <height>51</height>
     </rect>
    </property>
    <property name="font">
     <font>
      <pointsize>16</pointsize>
      <italic>true</italic>
      <underline>false</underline>
      <strikeout>false</strikeout>
     </font>
    </property>
    <property name="cursor">
     <cursorShape>BlankCursor</cursorShape>
    </property>
    <property name="text">
     <string>Socket Control</string>
    </property>
    <property name="alignment">
     <set>Qt::AlignCenter</set>
    </property>
   </widget>
   <widget class="QLineEdit" name="Client_Port">
    <property name="geometry">
     <rect>
      <x>200</x>
      <y>140</y>
      <width>51</width>
      <height>27</height>
     </rect>
    </property>
   </widget>
   <widget class="QPushButton" name="Client_Button">
    <property name="geometry">
     <rect>
      <x>260</x>
      <y>140</y>
      <width>151</width>
      <height>27</height>
     </rect>
    </property>
    <property name="text">
     <string>TCP-Client-Connect</string>
    </property>
   </widget>
   <widget class="QLabel" name="label">
    <property name="geometry">
     <rect>
      <x>10</x>
      <y>130</y>
      <width>21</width>
      <height>41</height>
     </rect>
    </property>
    <property name="text">
     <string>IP:</string>
    </property>
   </widget>
   <widget class="QLabel" name="label_2">
    <property name="geometry">
     <rect>
      <x>150</x>
      <y>130</y>
      <width>51</width>
      <height>41</height>
     </rect>
    </property>
    <property name="text">
     <string>PORT:</string>
    </property>
   </widget>
   <widget class="QLineEdit" name="Server_Port">
    <property name="geometry">
     <rect>
      <x>60</x>
      <y>320</y>
      <width>51</width>
      <height>27</height>
     </rect>
    </property>
   </widget>
   <widget class="QLabel" name="label_3">
    <property name="geometry">
     <rect>
      <x>10</x>
      <y>310</y>
      <width>51</width>
      <height>41</height>
     </rect>
    </property>
    <property name="text">
     <string>PORT:</string>
    </property>
   </widget>
   <widget class="QPushButton" name="Server_Button">
    <property name="geometry">
     <rect>
      <x>120</x>
      <y>320</y>
      <width>161</width>
      <height>27</height>
     </rect>
    </property>
    <property name="text">
     <string>TCP-Server-Monitor</string>
    </property>
   </widget>
   <widget class="QLabel" name="label_7">
    <property name="geometry">
     <rect>
      <x>10</x>
      <y>170</y>
      <width>151</width>
      <height>41</height>
     </rect>
    </property>
    <property name="text">
     <string>Data Ricieve Frame:</string>
    </property>
   </widget>
   <widget class="QLabel" name="label_8">
    <property name="geometry">
     <rect>
      <x>230</x>
      <y>170</y>
      <width>151</width>
      <height>41</height>
     </rect>
    </property>
    <property name="text">
     <string>Data Send Frame:</string>
    </property>
   </widget>
   <widget class="QLabel" name="label_9">
    <property name="geometry">
     <rect>
      <x>10</x>
      <y>350</y>
      <width>151</width>
      <height>41</height>
     </rect>
    </property>
    <property name="text">
     <string>Data Ricieve Frame:</string>
    </property>
   </widget>
   <widget class="QLabel" name="label_10">
    <property name="geometry">
     <rect>
      <x>230</x>
      <y>350</y>
      <width>151</width>
      <height>41</height>
     </rect>
    </property>
    <property name="text">
     <string>Data Send Frame:</string>
    </property>
   </widget>
   <widget class="QLabel" name="Corver">
    <property name="geometry">
     <rect>
      <x>220</x>
      <y>40</y>
      <width>171</width>
      <height>91</height>
     </rect>
    </property>
    <property name="text">
     <string>                     Corver</string>
    </property>
   </widget>
   <widget class="QPushButton" name="pushButton">
    <property name="geometry">
     <rect>
      <x>350</x>
      <y>180</y>
      <width>51</width>
      <height>27</height>
     </rect>
    </property>
    <property name="text">
     <string>Send</string>
    </property>
   </widget>
   <widget class="QPushButton" name="ServerSend">
    <property name="geometry">
     <rect>
      <x>350</x>
      <y>360</y>
      <width>51</width>
      <height>27</height>
     </rect>
    </property>
    <property name="text">
     <string>Send</string>
    </property>
   </widget>
   <widget class="QPlainTextEdit" name="Client_Recieve">
    <property name="geometry">
     <rect>
      <x>10</x>
      <y>210</y>
      <width>171</width>
      <height>101</height>
     </rect>
    </property>
   </widget>
   <widget class="QPlainTextEdit" name="Client_Send">
    <property name="geometry">
     <rect>
      <x>230</x>
      <y>210</y>
      <width>171</width>
      <height>101</height>
     </rect>
    </property>
   </widget>
   <widget class="QPlainTextEdit" name="Server_Recieve">
    <property name="geometry">
     <rect>
      <x>10</x>
      <y>390</y>
      <width>171</width>
      <height>101</height>
     </rect>
    </property>
   </widget>
   <widget class="QPlainTextEdit" name="Server_Send">
    <property name="geometry">
     <rect>
      <x>230</x>
      <y>390</y>
      <width>171</width>
      <height>101</height>
     </rect>
    </property>
   </widget>
   <widget class="QPushButton" name="Client_Clear">
    <property name="geometry">
     <rect>
      <x>150</x>
      <y>180</y>
      <width>51</width>
      <height>27</height>
     </rect>
    </property>
    <property name="text">
     <string>Clear</string>
    </property>
   </widget>
   <widget class="QPushButton" name="Server_Clear">
    <property name="geometry">
     <rect>
      <x>150</x>
      <y>360</y>
      <width>51</width>
      <height>27</height>
     </rect>
    </property>
    <property name="text">
     <string>Clear</string>
    </property>
   </widget>
  </widget>
  <widget class="QMenuBar" name="menuBar">
   <property name="geometry">
    <rect>
     <x>0</x>
     <y>0</y>
     <width>421</width>
     <height>25</height>
    </rect>
   </property>
  </widget>
  <widget class="QToolBar" name="mainToolBar">
   <attribute name="toolBarArea">
    <enum>TopToolBarArea</enum>
   </attribute>
   <attribute name="toolBarBreak">
    <bool>false</bool>
   </attribute>
  </widget>
  <widget class="QStatusBar" name="statusBar"/>
 </widget>
 <layoutdefault spacing="6" margin="11"/>
 <resources/>
 <connections/>
</ui>

                         Ubuntu 16.04 Edition Qt Socket Project                                                                           Windows 10 端的Socket Tool

 

整个界面的样式如图所示，包括了TCP Client以及TCP Server端。

IP表示客户端将要连接的TCP Server的服务器ip地址，PORT填入的是对应的TCP Server的地址开放的监听的端口号

Clear按钮是用来清楚Server或者Client的接收空间，Send是用来发送发送栏当中的数据的。其他按钮用来开启对应的服务。

Step2：相关槽函数已经接收读取函数的实现

void MainWindow::Client_Recieve_Data(void)
{
    QByteArray buf;
    buf = client->readAll();
    if(!buf.isEmpty())
    {
        QString str = this->ui->Client_Recieve->toPlainText();
        str += tr(buf);
        this->ui->Client_Recieve->clear();
        this->ui->Client_Recieve->appendPlainText(str);
    }
    buf.clear();
}

void MainWindow::on_Client_Button_clicked(bool checked)
{
    if(!ClientFlag)
    {
        QString IP,PORT;
        IP = this->ui->IP_Address->text();
        PORT = this->ui->Client_Port->text();

        qDebug() << IP;
        qDebug() << PORT;

        client->connectToHost(QHostAddress(IP),PORT.toInt(),QTcpSocket::ReadWrite);
        qDebug() << "Client is Started!";

        QObject::connect(client,&QTcpSocket::readyRead,this,&MainWindow::Client_Recieve_Data);
        this->ui->Client_Button->setStyleSheet("background-color: rgb(85,170,0);");
    }
    else
    {
        this->ui->Client_Button->setStyleSheet("background-color: rgb(0,0,0);");
        client->close();
        qDebug() << "Client is Closed!";
    }

    ClientFlag = !ClientFlag;
}

void MainWindow::on_pushButton_clicked(bool checked)
{
    if(ClientFlag)
    {
        QString Send_data;
        Send_data = this->ui->Client_Send->toPlainText();
        qDebug() << Send_data;
        client->write(Send_data.toLatin1());
        qDebug() << "Data sended!";
    }
}

void MainWindow::on_Client_Clear_clicked(bool checked)
{
    this->ui->Client_Recieve->clear();
    qDebug() << "Client_Recieve_CLear!";
}

/************************************************************
 * Server Side Programming!
 * The Qt Socket Programming have ever finished binding the port!
 * The accept func is trigger by a new connection signal!
 ***********************************************************/

void MainWindow::readClient(void)
{
    QByteArray buf;
    buf = client_connect->readAll();
    if(!buf.isEmpty())
    {
        QString str = this->ui->Server_Recieve->toPlainText();
        str += tr(buf);
        this->ui->Server_Recieve->clear();
        this->ui->Server_Recieve->appendPlainText(str);
    }
    buf.clear();
}

void MainWindow::accepConnection(void)
{
    client_connect = server->nextPendingConnection();
    QObject::connect(client_connect,&QTcpSocket::readyRead,this,&MainWindow::readClient);
}

void MainWindow::on_Server_Clear_clicked(bool checked)
{
    this->ui->Server_Recieve->clear();
    qDebug() << "Server_Recieve_Clear!";
}

void MainWindow::on_ServerSend_clicked(bool checked)
{
    if(ServerFlag)
    {
        QString SendData;
        SendData = this->ui->Server_Send->toPlainText();
        client_connect->write(SendData.toLatin1());

        qDebug() << SendData;
        qDebug() << "ServerData send!";
    }
}

void MainWindow::on_Server_Button_clicked(bool checked)
{
    if(!ServerFlag)
    {
        QString MonitorPort;
        MonitorPort = this->ui->Server_Port->text();

        int PortNum;
        PortNum = MonitorPort.toInt();

        server->listen(QHostAddress::Any,PortNum);

        QObject::connect(server,&QTcpServer::newConnection,this,&MainWindow::accepConnection);

        qDebug() << "Server Started!";
        qDebug() << "PortNum:" << PortNum;
        this->ui->Server_Button->setStyleSheet("background-color: rgb(85,170,0);");
    }
    else
    {
        this->ui->Server_Button->setStyleSheet("background-color: rgb(0,0,0);");
        client_connect->close();
        server->close();
        qDebug() << "Server Closed!";
    }
    ServerFlag = !ServerFlag;
}

Step3：槽函数的声明&Socket对象定义

private slots:
    void on_Client_Button_clicked(bool checked);

    void on_pushButton_clicked(bool checked);

    void Client_Recieve_Data(void);

    void accepConnection(void);

    void readClient(void);

    void on_Client_Clear_clicked(bool checked);

    void on_Server_Clear_clicked(bool checked);

    void on_ServerSend_clicked(bool checked);

    void on_Server_Button_clicked(bool checked);

    void TimeOutProcess(void);

private:
    Ui::MainWindow *ui;

    QTcpSocket *client;

    QTcpServer *server;
    QTcpSocket *client_connect;

    QTimer *TimeMonitor;

    bool ClientFlag = false;
    bool ServerFlag = false;

Step4：信号和槽的连接

connect(this->ui->Client_Button,SIGNAL(clicked(bool)),this,SLOT(on_Client_Button_clicked()));
connect(this->ui->pushButton,SIGNAL(clicked(bool)),this,SLOT(on_pushButton_clicked()));

connect(this->ui->Client_Clear,SIGNAL(clicked(bool)),this,SLOT(on_Client_Clear_clicked()));
connect(this->ui->Server_Clear,SIGNAL(clicked(bool)),this,SLOT(on_Server_Clear_clicked()));

connect(this->ui->ServerSend,SIGNAL(clicked(bool)),this,SLOT(on_ServerSend_clicked()));

connect(this->ui->Server_Button,SIGNAL(clicked(bool)),this,SLOT(on_Server_Button_clicked()));

connect(TimeMonitor,&QTimer::timeout,this,&MainWindow::TimeOutProcess);

完成上述操作，基本就完成了Qt Socket程序的功能。