QML如何通过WebSocket和C++交互？

前言

websocket，作为一个全双工的网络通讯协议，正在慢慢的被各大开发框架和语言接受。

其中在和程序之间，负担着大量数据传递，就是websocket。

今天就来说下qml如何通过websocket和c++交互。

---

信号和槽？还是websocket

一般来说，使用qml开发当程序，都是通过信号和槽，与c++交互。

这时候问题就来了，如果需求是要跨进程或者跨设备，那这种传统方法就不可行。

ps：这里不讨论qt remote object

通常我们的做法是在c++写一个接口，把通讯协议，比如说tcp或者消息队列，封装好，然后再注册一个类到qml，再在qml中调用这个注册过去的类以及接口。

这一过程繁琐，涉及的接口多，造成诸多困扰和不便。

另外如果是自己根据一些底层协议搞，比如说根据传输层的tcp造应用层的*，那问题更多了，相信造过*的人都有感受。

即使是使用http，也会有性能、网络延迟和反向通知（服务器主动通知客户端）等问题。

因此，就出现了websocket，在一定范围内，来解决这一系列的问题。

---

使用

直接上代码，展示如何使用websocket

c++代码（服务端）：

qwebsocketserver server( "myserver", qwebsocketserver::nonsecuremode ); // 实例化一个websocket服务端
qobject::connect( &server, &qwebsocketserver::newconnection, [ &server ]() // 连接信号，这里使用lambda的方式，以简化代码
{
    // 当接收到一个新连接时
    auto websocket = server.nextpendingconnection();
    qdebug() << "newconnection:" << websocket;

    qobject::connect( websocket, &qwebsocket::textmessagereceived, [ websocket ](const qstring &message) // 连接信号，这里使用lambda的方式，以简化代码
    {
        // 当连接收到数据时
        qdebug() << "server textmessagereceived:" << message;
        websocket->sendtextmessage( "please enjoy websocket" );
    } );
} );
qdebug() << "listen:" << server.listen( qhostaddress::any, 18546 ); // 开始监听

这几行代码，就可以实现一个简单的websocket服务端的应答机制

使用方法和qtcpserver如出一辙，就是扩展了一些接口和属性。

qml代码（客户端）：

websocket {
    id: websocket
    url: "ws://127.0.0.1:18546" // url表示目标的地址、端口、path和query这些
    active: true // active表示开启这个连接

    onstatuschanged: {
        // 监听socket状态变化

        if ( status === websocket.open )
        {
            // open状态表示连接已经打开，立即发送一个"hello websocket"

            print( "websocket is opened" );
            websocket.sendtextmessage( "hello websocket" );
        }
    }

    ontextmessagereceived: {
        // 监听收到的数据，收到后通过print打印到控制台

        print( "ontextmessagereceived:", message );
    }
}

也只需要这几行代码，就可以在qml中简单的操作websocket完成一次发送和接收操作。

如果运行正常，那么c++和qml依次运行后，控制台就会有如下打印：

qml: websocket is opened
qml: ontextmessagereceived: please enjoy websocket

---

path & query

和http请求一样，websocket可以在url中加入path和query，让请求更规范和简洁。

例如现在有一个聊天室的websocket请求，进入到聊天房间1，接受所有类型的消息，那url就可以这样写：

ws://127.0.0.1:18546/chatroom/1?filter=all

在c++端，可以这样解析：

qdebug() << "path:" << websocket->request().url().path();
qdebug() << "query:" << websocket->request().url().query();

c++端，打印内容如下：

path: "/chatroom/1"
query: "filter=all"

---

总结

websocket与常见的http和tcp相比，他相当于结合了二者的优点，既能够方便快捷的使用，又能保持长连接、低延迟和双向通讯等特点。

但是，websocket必然不是一个万能协议，不是说他出现，就直接干掉http和tcp了，最终技术选型，还是要按照项目实际需求来。