WebSocket理论知识

WebSocket是一种在单个TCP连接上进行全双工通信的协议。

很多服务http协议进行交互，但是http协议的服务特点为一次一服务的特点。

在实际开发我们经常需要服务给予我们反馈，如果使用http协议的话。我们就需要使用轮询技术。轮询是在特定的时间间隔（如1秒），定时想服务器发送请求询问结果，当结果返回时才停止轮询，这样的缺点很明显，1、浪费带宽资源。2.发起轮询等待的系统资源。

Websocket双工通信的特点，服务器在处理任务结束后可以直接通知客户端。

Websocket服务器

页面设计如下

输入监听端口，创建websocket就可以创建websocket服务器。

框架设计

websocket服务器设计框架如下图：

Mainwindow:用于主程序。

Websocket:启动websocket监听端口，获取数据链接等。

QWebSocket：websocket服务类，监听功能封装。

QWebSocket：绑定消息socket通道，接收或者发送消息。

服务监听

    if (m_pWebSocketServer->listen(QHostAddress::Any, port)) {
        printf("start success!\n");

        printf("Echoserver listening on port %d\n", port);
        connect(m_pWebSocketServer, &QWebSocketServer::newConnection, this,
                &WebsocketServer::onNewConnection);
        connect(m_pWebSocketServer, &QWebSocketServer::closed, this,
                &WebsocketServer::closed);
    } else {
        printf("start error!\n");
    }

listen启动websocket监听服务器，绑定链接以及断链信号。

newConnection：新建链接信号，当有客户端链接到websocket服务器时触发该信号，在该信号处理时。我们可以记录客户端的socket信息，方便后续通信使用。

Websocket链接信号

当链接链接到来时，记录QWebSocket的链接信息。并且绑定数据发送、接收和断链信号。

textMessageReceived：为文本消息发送信号，仅接收文本文件的消息。

binaryMessageReceived：为二进制消息发送信号，可接收二进制流消息，可以用来传送文件等。

disconnected：断链信号。

void WebsocketServer::onNewConnection()
{
    QWebSocket *pSocket = m_pWebSocketServer->nextPendingConnection();

    connect(pSocket, &QWebSocket::textMessageReceived, this,
            &WebsocketServer::processTextMessage);
    connect(pSocket, &QWebSocket::binaryMessageReceived, this,
            &WebsocketServer::processBinaryMessage);
    connect(pSocket, &QWebSocket::disconnected, this,
            &WebsocketServer::socketDisconnected);

    m_clients << pSocket;
}

disconnected当获取该信号后需要找到断链的客户端并且将其移除

void WebsocketServer::socketDisconnected()
{
    QWebSocket *pClient = qobject_cast<QWebSocket *>(sender());
    if (m_debug) qInfo() << "socketDisconnected:" << pClient;
    if (pClient) {
        m_clients.removeAll(pClient);
        pClient->deleteLater();
    }
}

Websocket客户端

我们这里可以直接使用js编写，代码如下：

浏览器提供了WebSocket接口直接链接websocket服务器。

onopen：当链接时调用

onclose：当链接关闭时调用

onmessage：当服务器向浏览器返回消息时

send：向服务器发送消息。

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<script type="text/javascript">
	var wsUri = "ws://127.0.0.1:8080"
	 websocket = new WebSocket(wsUri);
        websocket.onopen = function(evt) {
           
        };
        websocket.onclose = function(evt) {
            
        };
        websocket.onmessage = function(evt) {
           
        };
        websocket.onerror = function(evt) {
            
        };
        function click_send(){
        	var msg = document.getElementById("msg").value;
        	websocket.send(msg);
        }
</script>
<body>
<input type="text" id="msg" name="">
<button onclick="click_send();">按钮</button>
</body>
</html>