jsp购物网站开发 论文,廊坊做网站的企业哪家好,哈尔滨做公司网站的公司有哪些,wordpress 相片一、WebSocket的定义 WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket通信协议于2011年被IETF定为标准RFC 6455#xff0c;并由RFC7936补充规范。WebSocket API也被W3C定为标准。 WebSocket使得客户端和服务器之间的数据交换变得更加简单#xff0c;…一、WebSocket的定义 WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket通信协议于2011年被IETF定为标准RFC 6455并由RFC7936补充规范。WebSocket API也被W3C定为标准。 WebSocket使得客户端和服务器之间的数据交换变得更加简单允许服务端主动向客户端推送数据。想对应http协议来说websocket更加的平等在http协议中只有客户端向服务器发送申请请求之后服务器才会返回请求的数据如果要保证实时性的话就需要不断地轮询每隔一段时间就向服务器发送一个请求这样就会造成很大的开销而WebSocket服务器主动向客户端发送数据而不需要申请客户端发送数据给服务器也是如此 简单来说就是浏览器和服务器之间通信的一种协议相比较http来说数据交换更加平等开销更小
二、服务器和客户端 要想在Qt实现websocket那么我们主要的就是实现一个服务器由网页实现一个客户端 2.1 服务器的实现 要实现服务器首先要认识QWebSocketServer Class我们需要通过这个类实现 1类分析 从上图可以知道需要在.pro文件中添加QTwebsockets然后添加头文件新建一个WebSocketTest窗口应用程序试图如下 2添加库 在WebSocketTest中添加下面的语句
QT websockets3添加头文件 在websockettest.h中添加头文件声明变量
#ifndef WEBSOCKETTEST_H
#define WEBSOCKETTEST_H#include QWidget
#include QWebSocketServerQT_BEGIN_NAMESPACE
namespace Ui { class WebSocketTest; }
QT_END_NAMESPACEclass WebSocketTest : public QWidget
{Q_OBJECTpublic:WebSocketTest(QWidget *parent nullptr);~WebSocketTest();private:Ui::WebSocketTest *ui;//声明QWebSocketServer变量QWebSocketServer *web_server;};
#endif // WEBSOCKETTEST_H4QWebSocketServer类的使用 再来看一看关于这个类的使用类名上面F1进入帮助界面可以看到 翻译过来就是
QWebSocketServer是一个基于QTcpServer模型的类用于处理WebSocket协议的服务器端通信。如果你知道如何使用QTcpServer你就可以很轻松的使用QWebSocketServer。
QWebSocketServer类主要用于接收并处理来自客户端的WebSocket连接你可以手动设定服务端的端口也可以让QWebSocketServer自动选择。调用listen()函数即可让服务器开始侦听连接请求。
每当有新的客户端尝试连接服务器时newConnection()信号就会发出。服务器可以调用nextPendingConnection()方法接受这个握手请求同时返回一个已经连接状态的QWebSocket对象指针服务器即可通过这个指针和客户端进行通信。
如果在过程中发生错误serverError()方法可以获取错误类型同时可以调用errorString()方法获取人类可读的错误描述。
当服务器侦听连接请求时可以通过serverAddress()和serverPort()来获取服务器正在侦听的地址和端口。调用close()函数可以使QWebSocketServer停止侦听连接请求。
QWebSocketServer当前还不支持WebSocket拓展和WebSocket子协议。该类仅支持RFC 6455中规定的WebSocket协议的13版。
有一个默认的握手超时设置为10秒主要用于防止拒绝服务攻击该超时时间可以通过setHandshakeTimeout()自定义。
参见WebSocket Server Example和QWebSocket。 也就是说使用listen函数监听连接请求一旦有新的客户端连接就可以触发newConnection()信号再由服务器通过nextPendingConnection()方法接收这个客户端的连接这个方法返回一个QWebsocket的对象指针通过这个指针就可以和客户端通信了
5代码实现 首先客户端代码我这里直接提供一个可以测试的html新建一个文本文件将下面内容复制进去保存后将后缀改为html,点击使用浏览器打开。
!DOCTYPE html
html
head
titleWebSocket Test/title
style#testButton {display: block;margin: 20px auto;padding: 10px 20px;font-size: 16px;}#messageDisplay {margin: 20px auto;padding: 10px;border: 1px solid #ccc;width: 80%;height: 200px;overflow-y: scroll;font-size: 14px;}
/style
/head
body
button idtestButtonSend Test Message/button
div idmessageDisplay/divscript
var ws new WebSocket(ws://localhost:15678);ws.onopen function() {console.log(WebSocket connection opened.);
};ws.onmessage function(event) {console.log(Message from server:, event.data);var messageDisplay document.getElementById(messageDisplay);messageDisplay.innerHTML p event.data /p;
};ws.onerror function(error) {console.error(WebSocket error:, error);
};ws.onclose function() {console.log(WebSocket connection closed.);
};document.getElementById(testButton).onclick function() {ws.send(Test);console.log(Test message sent.);
};
/script
/body
/html服务器相关代码
构造函数 web_server new QWebSocketServer(Myserver,QWebSocketServer::NonSecureMode,this);if(web_server-listen(QHostAddress::Any,15678)){qDebug()开始监听;connect(web_server,QWebSocketServer::newConnection,this,WebSocketTest::newCilentConnect);}槽函数
void WebSocketTest::newCilentConnect()
{//返回客户端web_client web_server-nextPendingConnection();qDebug() 有新的 WebSocket 客户端连接。;}
编译运行服务器然后点击html文件可以发现会打印”有新的 WebSocket 客户端连接“ 6接收客户端的消息
void WebSocketTest::newCilentConnect()
{//返回客户端web_client web_server-nextPendingConnection();qDebug() 有新的 WebSocket 客户端连接。;// 处理接收到的消息connect(web_client , QWebSocket::textMessageReceived, this, WebSocketTest::onTextMessageReceived);}void WebSocketTest::onTextMessageReceived(const QString message)
{qDebug() 收到客户端消息 message;if(messageTest){/*在这里执行你实现的操作如网页一个按钮点击后发送打开摄像头信息给服务器服务器执行打开摄像头的操作*/}
} 编译运行点击网页上的按钮服务器就可以收到这个消息了
2.2 客户端的实现 到前面为止就可以实现客户端发送数据到服务器的操作现在实现服务器发送数据给客户端 // 向客户端发送数据
void WebSocketTest::sendClientData(const QString str)
{if (web_client-isValid()) {web_client-sendTextMessage(str);}
}然后在界面上添加一个按钮发送信息给客户端 void WebSocketTest::on_btn_send_clicked()
{sendClientData(Hello);
}编译运行刷新网页后点击按钮查看效果 三、完整源码 websocket.c
#include websockettest.h
#include ui_websockettest.hWebSocketTest::WebSocketTest(QWidget *parent): QWidget(parent), ui(new Ui::WebSocketTest)
{ui-setupUi(this);// 创建 WebSocket 服务器web_server new QWebSocketServer(Myserver,QWebSocketServer::NonSecureMode,this);//监听if(web_server-listen(QHostAddress::Any,15678)){qDebug()开始监听;connect(web_server,QWebSocketServer::newConnection,this,WebSocketTest::newCilentConnect);}}void WebSocketTest::newCilentConnect()
{web_client web_server-nextPendingConnection();qDebug() 有新的 WebSocket 客户端连接。;// 处理客户端断开连接connect(web_client, QWebSocket::disconnected, this, [this, web_client]() {qDebug() WebSocket 客户端断开连接。;web_client-deleteLater();});// 处理接收到的消息connect(web_client, QWebSocket::textMessageReceived, this, WebSocketTest::onTextMessageReceived);}
void WebSocketTest::onTextMessageReceived(const QString message)
{qDebug() 收到客户端消息 message;}// 向客户端发送数据
void WebSocketTest::sendClientData(const QString str)
{if (web_client-isValid()) {web_client-sendTextMessage(str);}
}void WebSocketTest::on_btn_send_clicked()
{sendClientData(Hello);
}WebSocketTest::~WebSocketTest()
{delete ui;
}
websocket.h
#ifndef WEBSOCKETTEST_H
#define WEBSOCKETTEST_H#include QWidget
#include QWebSocketServer
#include QDebug
#include QWebSocketQT_BEGIN_NAMESPACE
namespace Ui { class WebSocketTest; }
QT_END_NAMESPACEclass WebSocketTest : public QWidget
{Q_OBJECTpublic:WebSocketTest(QWidget *parent nullptr);~WebSocketTest();private:Ui::WebSocketTest *ui;//声明QWebSocketServer变量 服务器QWebSocketServer *web_server;//客户端QWebSocket* web_client;private slots://客户端连接槽函数void newCilentConnect();//接收新客户端消息函数void onTextMessageReceived(const QString message);//发送消息给客户端函数void on_btn_send_clicked();private://发送消息给客户端void sendClientData(const QString str);};
#endif // WEBSOCKETTEST_Hwebsocket.html
!DOCTYPE html
html
head
titleWebSocket Test/title
style#testButton {display: block;margin: 20px auto;padding: 10px 20px;font-size: 16px;}#messageDisplay {margin: 20px auto;padding: 10px;border: 1px solid #ccc;width: 80%;height: 200px;overflow-y: scroll;font-size: 14px;}
/style
/head
body
button idtestButtonSend Test Message/button
div idmessageDisplay/divscript
var ws new WebSocket(ws://localhost:15678);ws.onopen function() {console.log(WebSocket connection opened.);
};ws.onmessage function(event) {console.log(Message from server:, event.data);var messageDisplay document.getElementById(messageDisplay);messageDisplay.innerHTML p event.data /p;
};ws.onerror function(error) {console.error(WebSocket error:, error);
};ws.onclose function() {console.log(WebSocket connection closed.);
};document.getElementById(testButton).onclick function() {ws.send(Test);console.log(Test message sent.);
};
/script
/body
/html
