How to do it...

To create a TCP client in Qt 5, let's do the following:

  1. First off, let's create a new Qt Widgets Application project from Files | New File or Project.
  2. Once the project has been created, let's open up mainwindow.ui and set up the GUI as shown in the following diagram. Please note that the layout direction of the central widget has to be vertical:

  1. Then, right-click on the push button that says Connect and create a clicked() slot function from the menu. Then, repeat the same step on the Send button as well. As a result, two slot functions will be created for you in the source code, which may or may not look like what we see in the following code, depending on your widget's name:
void on_connectButton_clicked();
void on_sendButton_clicked();
  1. Next, open up mainwindow.h and add the following headers:
#include <QDebug>
#include <QTcpSocket>

  1. Then, declare the printMessage() function and three slot functions: socketConnected(), socketDisconnected(), and socketReadyRead(), as shown in the following code:
public:
explicit MainWindow(QWidget *parent = 0);
~MainWindow();
void printMessage(QString message);

private slots:
void on_connectButton_clicked();
void on_sendButton_clicked();
void socketConnected();
void socketDisconnected();
void socketReadyRead();
  1. After that, declare the following variables as well:
private:
Ui::MainWindow *ui;
bool connectedToHost;
QTcpSocket* socket;
  1. Once you're done with that, you can proceed to mainwindow.cpp and define the printMessage() function, as shown in the following example:
void MainWindow::printMessage(QString message) {
ui->chatDisplay->append(message);
}
  1. Then, we'll implement the on_connectButton_clicked() function, which will be triggered when the Connect button has been clicked, as shown in the following code:
void MainWindow::on_connectButton_clicked() {
if (!connectedToHost) {
socket = new QTcpSocket();
connect(socket, &QTcpSocket::connected, this, &MainWindow::socketConnected);
connect(socket, &QTcpSocket::disconnected, this, &MainWindow::socketDisconnected);
connect(socket, &QTcpSocket::readyRead, this, &MainWindow::socketReadyRead);
socket->connectToHost("127.0.0.1", 8001);
} else {
QString name = ui->nameInput->text();
socket->write("<font color="Orange">" + name.toUtf8() + " has left the chat room.</font>");
socket->disconnectFromHost();
}
}
  1. We also define the on_sendButton_clicked() function, which will be called when the Send button has been clicked, as shown in the following example:
void MainWindow::on_sendButton_clicked() {
QString name = ui->nameInput->text();
QString message = ui->messageInput->text();
socket->write("<font color="Blue">" + name.toUtf8() + "</font>: " + message.toUtf8());
ui->messageInput->clear();
}
  1. Right after that, we implement the socketConnected() function, which will be called when the client program has been successfully connected to the server, as shown in the following code:
void MainWindow::socketConnected() {
qDebug() << "Connected to server.";
printMessage("<font color="Green">Connected to server.</font>");
QString name = ui->nameInput->text();
socket->write("<font color="Purple">" + name.toUtf8() + " has joined the chat room.</font>");
ui->connectButton->setText("Disconnect");
connectedToHost = true;
}
  1. We are not yet done at this point. We also need to implement the socketDisconnected() function, which will be triggered whenever the client has been disconnected from the server, as shown in the following code:
void MainWindow::socketDisconnected() {
qDebug() << "Disconnected from server.";
printMessage("<font color="Red">Disconnected from server.</font>");
ui->connectButton->setText("Connect");
connectedToHost = false;
}

  1. Lastly, we also need to define the socketReadyRead() function, which prints out the message sent from the server, as shown in the following example:
void MainWindow::socketReadyRead() {
printMessage(socket->readAll());
}
  1. Before we run the client program, we must first turn on the server program which we have created in the previous recipe. Then, build and run the client program. Once the program has been opened, go and click the Connect button. After you have successfully connected to the server, type something in the line edit widget located at the bottom and press the Send button. You should see something similar to the following screenshot:

  1. Let's go to the server program, shown in the following screenshot, and see whether there is anything printed on the terminal window:

  1. Congratulations, you have successfully created a program that looks a bit like an Internet Relay Chat (IRC) chat room!

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset