自己做效果图的网站网页制作免费网站制作

测试内容：

客户端：

1 连接服务器

2 发送数据

3 处理错误信号

4 监听断开信号

5 接收服务器的数据

 服务器：

1 监听等待客户端连接

2 向指定的客户端发送数据

4 监听断开信号

5 接收客户端的数据

测试界面

工程文件.pro添加的内容：

QT += network websockets

 widget.h文件的内容

#ifndef WIDGET_H
#define WIDGET_H#include <QWidget>
#include <QWebSocketServer>
#include <QWebSocket>
#include <QHostAddress>
#include <QDebug>
#include <QVariant>QT_BEGIN_NAMESPACE
namespace Ui {
class Widget;
}
QT_END_NAMESPACEclass Widget : public QWidget
{Q_OBJECTpublic:Widget(QWidget *parent = nullptr);QWebSocketServer *m_server = nullptr;QWebSocket *m_webSocket_client = nullptr;~Widget();private slots:void on_pushButton_clicked();void on_pushButton_2_clicked();void on_pushButton_3_clicked();void on_pushButton_6_clicked();void on_pushButton_5_clicked();
private:Ui::Widget *ui;
};
#endif // WIDGET_H

窗体构造函数：

Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);m_server = new QWebSocketServer(QStringLiteral("My Server"),QWebSocketServer::NonSecureMode);//处理QWebSocketServer的closed信号connect(m_server, &QWebSocketServer::closed, this, [this](){QWebSocketServer *server = (QWebSocketServer*)sender();while(ui->comboBox->count() > 0){QVariant socketVariant = ui->comboBox->itemData(0);QWebSocket *socket = qvariant_cast<QWebSocket *>(socketVariant);QString item_txt = QString("delete client:%1:%2").arg(socket->peerAddress().toString()).arg(socket->peerPort());ui->textBrowser_4->append(item_txt);socket->close();ui->comboBox->removeItem(0);}});//处理QWebSocketServer的newConnection信号connect(m_server, &QWebSocketServer::newConnection, this, [this](){QWebSocketServer *server = (QWebSocketServer*)sender();QWebSocket *socket = server->nextPendingConnection();connect(socket, &QWebSocket::textMessageReceived, this, [this](const QString &message){this->ui->textBrowser_4->append(message);});//处理QWebSocketServer的新连接客户端的断开信号，用于删除列表框connect(socket,&QWebSocket::disconnected,this,[this](){this->ui->textBrowser_4->append("client disconnected success");QWebSocket *socket = (QWebSocket *)sender();for(int i = 0;i < ui->comboBox->count();i++){QVariant socketVariant = ui->comboBox->itemData(i);QWebSocket *webSocket = qvariant_cast<QWebSocket *>(socketVariant);if(socket == webSocket){ui->comboBox->removeItem(i);break;}}});QString item_txt = QString("%1:%2").arg(socket->peerAddress().toString()).arg(socket->peerPort());QVariant socketVariant = QVariant::fromValue(socket);ui->comboBox->addItem(item_txt,socketVariant);ui->textBrowser_4->append(QString("get a new client %1").arg(item_txt));});//初始化客户端和它的信号m_webSocket_client = new QWebSocket;connect(m_webSocket_client,&QWebSocket::connected,this,[this](){QWebSocket *socket = (QWebSocket*)sender();QString server_info = QString("connect %1:%2 ok").arg(socket->peerAddress().toString()).arg(socket->peerPort());this->ui->textBrowser_2->append(QString("connect server:%1 success").arg(server_info));});connect(m_webSocket_client,&QWebSocket::disconnected,this,[this](){this->ui->textBrowser_2->append("client disconnected success");});connect(m_webSocket_client,QOverload<QAbstractSocket::SocketError>::of(&QWebSocket::error),this,[this](QAbstractSocket::SocketError error){this->ui->textBrowser_2->append(QString("error:%1").arg(error));});connect(m_webSocket_client, &QWebSocket::textMessageReceived, this, [this](const QString &message){this->ui->textBrowser_2->append(message);});
}

客户端按钮

连接按钮

void Widget::on_pushButton_2_clicked()
{//QUrl serverUrl(QLatin1String("ws://127.0.0.1:12345"));QUrl serverUrl(QLatin1String(this->ui->lineEdit->text().toLatin1()));qDebug() << "begin connect " << serverUrl.toString();m_webSocket_client->open(serverUrl);
}

发送按钮

void Widget::on_pushButton_3_clicked()
{if(m_webSocket_client->state() == QAbstractSocket::ConnectedState){m_webSocket_client->sendTextMessage(this->ui->lineEdit_2->text());}
}

断开按钮 

void Widget::on_pushButton_clicked()
{if(m_webSocket_client->state() == QAbstractSocket::ConnectedState){m_webSocket_client->close();}
}

服务器按钮

 监听按钮

执行m_server->close();竟然不能关闭已经连接的客户端，后来在closed槽中又做了关闭处理。

void Widget::on_pushButton_5_clicked()
{if(m_server->isListening()){m_server->close();ui->pushButton_5->setText(tr("listen"));return;}if(m_server->listen(QHostAddress::Any,ui->lineEdit_4->text().toInt())){qDebug() << "listen port : " << m_server->serverPort() << " ok";ui->pushButton_5->setText(tr("stop"));}else{qCritical() << "listen port : " << m_server->serverPort() << " fail";ui->pushButton_5->setText(tr("listen"));}
}

发送按钮

根据combo列表的选项，向对应的客户端发送消息

void Widget::on_pushButton_6_clicked()
{int index = ui->comboBox->currentIndex();QVariant socketVariant = ui->comboBox->itemData(index);QWebSocket *current_client = qvariant_cast<QWebSocket *>(socketVariant);if(current_client->state() == QAbstractSocket::ConnectedState){current_client->sendTextMessage(this->ui->lineEdit_5->text());qDebug() << "send:" << this->ui->lineEdit_5->text();}else{ui->comboBox->removeItem(index);}
}

小结