A quick introduction into brokerless and language independent messaging for Vue.js

ZeroMQ is a great Messaging framework, which provides a great and reliable way to create distributed systems. You can use it in multiple threads, processes or on different boxes and it pretty much runs on every language you know. It provides a API for all common messaging methods:

Request/Reply

Publish/Subscribe

Push/Pull

By combining these 3 messaging patterns you can create pretty much any distributed system you want. You could even create something like Kafka with the help of ZeroMQ.

All of these messaging patterns have different use cases and I will not go into detail at this point because that would be a blog post of its own. If you want to find out more about the different distributed messaging architectures please read “The Guide” by Peter Hintjens(He is the creator of ZeroMQ). This book is one of the best reads on distributed messaging systems I have had so far, providing a lot of insight into different architectures and mechanisms. A must read for everyone who wants to use ZeroMQ in large distributed environments!

How ever, integrating ZeroMQ into your Vue.js Web application is not as straight forward as you think, even though it is supported by so many programming languages. Why? You can not run ZeroMQ in your browser! You will need a Node.js server in the middle, which translates your messages from ZeroMQ into something else.

In this article I will concentrate on integrating a Publish/Subscribe pattern into a Vue.js application by converting the messages into Socket.IO. All in all I will show 3 different applications:

A Python Publisher sending data

A Node.js Converter subscribing to the publisher and translating it into the Socket IO

A Vue.js App recieving the SocketIO packages and showing them on a Webpage

Python Publisher

The Python publisher generates some random data, puts it into a JSON string and publishes this created string under the ZeroMQ topic “rand”.

Nothing fancy here. Just your basic publisher for ZeroMQ written in Python. (Okay okay. I added a few getenv calls for reusabilty, but no biggy).

You can find the used Python ZeroMQ library here.

Node.js Converter

This Node.js Server is responsible for recieving and transferring the sent JSON string. For this server to work you will have to install SocketIO and ZeroMQ. After installing both libraries with npm we can get started.

Here, have some code:

The complexity of this server is quite low. The code can basically be split into four parts:

ZeroMQ connects to the topic “rand” on port 4001 SocketIO connects to port 4000 A trigger function is created that parses some json data and sends this object via SocketIO on the “news” event You connect this trigger function to ZeroMQ via the on() function.

So what exactly is happening here?

Two Sockets are connected to our server. The SocketIO connection can emit events to our WebUI directly via port 4000. The WebUI can then read the sent data. In this case we are emitting the event “news”.

The ZeroMQ connection is subscribed to the topic “rand” on port 4001. As you can remember this is the topic and port used by our Python Publisher. Every time a message is arriving from our Publisher the trigger function we connected with sock.on() is executed. The data that was sent via the Publisher will be handed over as the first function argument. In the trigger function the data is parsed, turned into a javascript object and then sent to our UI via the “news” event.

That is pretty much all you need if you want to convert a ZeroMQ Pub/Sub Message into a SocketIO message. We can now create the WebUI that catches the SocketIO Event.

Vue.js App

In this Vue.js app we are using Vue-Socket.io to help us with SocketIO.

First of all we need to import the library and connect to our server. By copying this Gist into our main.js, we are connecting to your Node.js server running on localhost Port 4000:

Afterwards we can listen to different events by defining them under sockets . Take a look at this component:

You can see that we listen to the “news” event, sent by the Node.js Server. The sent data is saved directly in recieved_num . Now your data is a standard Vue.js variable. You can now do all the great Vue things like binding them in your HTML code or using watchers to react to changes of your data. Every update from your Python Publisher will automatically be stored into your Vue variable. What you do with this variable is up to you :).

Summary

You should now be able to hook your Vue.js App directly into a ZeroMQ Pub/Sub Stream. This is done by using a converter in between and resending your message via SocketIO.

Other ZeroMQ patterns can be integrated by this method as well and you are not bound to Vue.js. React or vanilla Javascript will work as well.

But be careful. Your webbrowser/SocketIO can`t handle as much traffic as ZeroMQ. I normally implement some kind of timer on my Node.js Server, which reduces the amount of data sent to my webinterface. This reduces lags and weird behaviour in your webbrowser. Be aware that you might drop messages when your are not recieving them fast enough.

That was all! Thank you very much for reading my article. In case you found a better way of combining ZeroMQ and Vue.js, feel free to leave a comment.