I’m really proud to announce the first release of the Socket.IO C++ Client on GitHub!
Based on Boost and WebSocket++, this full-featured Socket.IO 1.0 client has the fundamental advantage of working on multiple platforms. Check out the directory of examples. It contains examples of iOS, QT, and CLI chat clients!
To learn how to use this client, I put together a QT chat example that communicates using a Socket.IO Node.JS chat server. Keep reading for step-by-step instructions.
If you’d like to follow along, begin by cloning the socket.io-client-cpp repository using the following:
git clone --recurse-submodules https://github.com/socketio/socket.io-client-cpp.git
The app includes the following features:
- Send messages to all users joining the room.
- Receive a notification when users join or leave the room.
- Receive notifications when a user starts typing a message.
Before you get started, visit the QT community to download and install QT.
Launch the QT Creator.
On the welcome page, select
New Project, then create a
QT Widget Application. Name it
The project structure should look like this:
Lets copy the SioClient into the QT project under the subfolder
SioChatDemo.pro to configure paths and compile options by simply adding:
SOURCES += ./sioclient/src/sio_client.cpp
Add two additional compile options:
no_keywords flag prevents
qmake from treating some function names as
emit as the keyword for the signal-slot mechanism.
c++11 to ask for C++11 support.
We now have our boost
headers and a fat boost
static lib named
To import them, we need to edit
SioChatDemo.pro again by adding a header including the following:
INCLUDEPATH += `our boost headers folder`
win32:CONFIG(release, debug|release): LIBS += -L`our Win32 boost static lib folder` -lboost
Create a simple UI by dragging and dropping a widget from the widget box on the left-hand side.
It contains the following:
QLineEditat the top to input a nickname:
QPushButtonat the top right for login:
QListWidgetin the center for showing messages:
QLineEditat the bottom for typing messages:
QPushButtonat the bottom right for sending messages:
The following slots need to be added in the
mainwindow class to handle UI events:
- Click ‘Login’ button
- Click ‘Send Message’ button
- Text change in message editing (to show typing status)
- Return message editing (for sending responses)
Insert the following code into the
MainWindow class in
mainwindow.ui in the design mode. Switch to the
signals/slots mode using
Click and hold the widget and drag it to the window (the cursor will become an electrical ground symbol) to open the connection editor.
In the connection editor, edit the main window slots on the right side. Add the slot function names added in
Then we can connect the event signal to the widget with our own slots. The result should look like this:
sio::client callbacks are not in the UI thread. However, the UI must be updated with those callbacks, so we need a signal for the non-UI thread to request the
slots functions in the UI thread. To signal that
QListWidgetItem has been added, insert the following:
// in mainwindow.h
Then connect them in the
For single-window applications, simply let
MainWindow class hold the
sio::client object by declaring a
unique_ptr member of the
sio::client and several event handling functions in
sio::client and setup event bindings for the default
socket in the
We also need to handle connectivity and disconnect events.
Add the following to the
MainWindow::MainWindow(QWidget *parent) :
We have several connection listeners for connection events.
First, we want to send a login message when were connected; we get the default
socket from the
client to do that.
If the connection closes or fails, we need to restore the UI before we connect.
void MainWindow::OnClosed(client::close_reason const& reason)
If we exit the
MainWindow, we need to clear the event bindings and listeners.
sio::client object will be destroyed using
We’ll need to handle socket.io events in our functions they are bound to.
For example, we need to show received messages in the list view.
void MainWindow::OnNewMessage(std::string const& name,message::ptr const& data,bool hasAck,message::ptr &ack_resp)
sendBtn is clicked, we need to send the text in
messageEdit to the chatroom.
Add the following code to
Don’t forget to star the project on GitHub to get updates!