- Upgrade: 向服务器指定协议类型，告诉web服务器当前使用的是websocket协议
- Sec-WebSocket-Key：是一个 Base64 encode 的值，这个是浏览器随机生成的
- Sec-WebSocket-Version：websocket协议版本
- Sec-WebSocket-Accept: 是经过服务器确认，并且加密过后的 Sec-WebSocket-Key。用来证明客户端和服务器之间能进行通信了。
服务端程序是通过QT实现
#ifndef WEBSOCKETSERVER_H
#define WEBSOCKETSERVER_H
#include <QWidget>
#include <QWebSocketServer>
#include <QWebSocket>
#include <QHostInfo>
#include <QNetworkInterface>
namespace Ui {
class WebSocketServer;
}
class WebSocketServer : public QWidget
{
Q_OBJECT
public:
explicit WebSocketServer(QWidget *parent = 0);
~WebSocketServer();
private slots:
void on_pushButton_startListen_clicked();
void onNewConnection();
void onTextMessageReceived(QString msg);
void onDisconnected();
void on_pushButton_send_clicked();
private:
Ui::WebSocketServer *ui;
QWebSocketServer *server;
QWebSocket *socket;
QList<QWebSocket*> clientList;
QString mAddr;
int mPort;
};
#endif // WEBSOCKETSERVER_H
#include "websocketserver.h"
#include "ui_websocketserver.h"
WebSocketServer::WebSocketServer(QWidget *parent) :
QWidget(parent),
ui(new Ui::WebSocketServer)
{
ui->setupUi(this);
ui->pushButton_send->setEnabled(false);
//获取本机IP和端口
QString hostName = QHostInfo::localHostName(); //获取主机名
QHostInfo hostInfo = QHostInfo::fromName(hostName); //获取主机信息
QList<QHostAddress> addList = hostInfo.addresses(); //获取IP地址列表
QString localIP;
if(!addList.isEmpty())
{
for(int i = 0; i < addList.count();i++)
{
QHostAddress aHost = addList.at(i);
if(QAbstractSocket::IPv4Protocol == aHost.protocol())
{
localIP = aHost.toString();
break;
}
}
}
ui->lineEdit_url->setText(localIP);
ui->lineEdit_port->setText("8080");
//构造：QWebSocketServer（const QString& serverName,QWebSocketServer::SslMode secureMode,QObject *parent=nullptr）
//使用给定的serverName构造一个新的QWebSocketServer。
//该服务器名称将在HTTP握手阶段被用来识别服务器。它可以为空，此时不会将服务器名称发送给客户端。
//SslMode指示服务器是通过wss（SecureMode）还是ws（NonSecureMode）运行
//QWebSocketServer::SecureMode服务器以安全模式运行（通过wss）
//QWebSocketServer::NonSecureMode服务器以非安全模式运行（通过ws）
server=new QWebSocketServer("Server",QWebSocketServer::NonSecureMode,this);
//有新的连接
connect(server,&QWebSocketServer::newConnection,this,&WebSocketServer::onNewConnection);
}
WebSocketServer::~WebSocketServer()
{
delete ui;
}
void WebSocketServer::on_pushButton_startListen_clicked()
{
QHostAddress address = QHostAddress(ui->lineEdit_url->text());
if(server->listen(address, ui->lineEdit_port->text().toInt())){
ui->pushButton_startListen->setEnabled(false);
ui->pushButton_startListen->setText("disListen");
}
}
void WebSocketServer::onNewConnection()
{
socket=server->nextPendingConnection();
mAddr = socket->peerAddress().toString();
mPort = socket->peerPort();
ui->plainTextEdit_clientStatus->appendPlainText("[" + mAddr + ":" + QString::number(mPort) + "]" + " connected...");
ui->pushButton_send->setEnabled(true);
connect(socket,&QWebSocket::textMessageReceived, this, &WebSocketServer::onTextMessageReceived);
ui->plainTextEdit_sendMsg->clear();
ui->plainTextEdit_sendMsg->appendPlainText("welcome to connect Server!");
//断开连接时
connect(socket,&QWebSocket::disconnected, this, &WebSocketServer::onDisconnected);
}
void WebSocketServer::onTextMessageReceived(QString msg)
{
ui->plainTextEdit_recvMsg->appendPlainText(msg);
}
void WebSocketServer::onDisconnected()
{
ui->plainTextEdit_clientStatus->appendPlainText("[" + mAddr + ":" + QString::number(mPort) + "]" + " disConnected!");
}
void WebSocketServer::on_pushButton_send_clicked()
{
socket->sendTextMessage(ui->plainTextEdit_sendMsg->toPlainText());
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Qt WebSocket Demo</title>
</head>
<body>
<input type="text" id="edit_url" value="ws://192.168.1.2:8080" />
<input type="button" id="btn_open" value="open" onclick="doOpen()" />
<br />
<p>Recv:</p>
<br />
<textarea id="edit_recv" cols="50" rows="10"></textarea>
<br />
<p>Send:</p>
<br />
<textarea id="edit_send" cols="50" rows="10">Hello, I am websocket Client!</textarea>
<br />
<input type="button" value="Send" onclick="doSend()" />
<script>
var edit_url = document.getElementById("edit_url");
var btn_open = document.getElementById("btn_open");
var edit_recv = document.getElementById("edit_recv");
var edit_send = document.getElementById("edit_send");
var client = null;
function doOpen() {
console.log("open")
if (!("WebSocket" in window)) {
//不支持WebSocket
console.log("no websocket")
return;
}
if (client === null) {
client = new WebSocket(edit_url.value);
client.onopen = function () {
btn_open.value = "Close";
}
//收到数据后追加到尾巴上
client.onmessage = function (event) {
edit_recv.value += String(event.data);
}
client.onclose = function () {
client = null;
btn_open.value = "Open";
}
} else {
client.close();
client = null;
}
}
function doSend() {
console.log("send")
if (client === null)
return;
client.send(edit_send.value);
}
</script>
</body>
</html>
