LCM Workshop: Intro to Mercure (1 of 4)

Profile picture for user Silas
Silas Albrecht
Senior Developer

Complete demo code available at: https://github.com/LastCallMedia/mercure-api-platform-demo

In this introductory video we give an overview of what Mercure is and why one might choose it to build web apps that need to subscribe to and publish real-time updates.

Relevant URLs:
https://github.com/dunglas/mercure
https://github.com/api-platform/api-platform

Transcript:

[bright electronic music]

Silas: Hello. Recently I’ve been working on a project which is built using API Platform. And API Platform is a PHP project built on Symfony, which helps you develop your APIs from scratch. So, this is a pretty cool project, and I have a React application, web app, in front of this. And recently a requirement came up that I needed to show live updates to users. So, this is an application with teams, and if you’re on a team, and you’re using this application, and somebody else on your team is also using the application, you should be seeing exactly what they’re doing as they do it, live in your browser. 

So, this is a pretty common requirement. We see this in chat applications, we see it on Facebook, we see it all over the internet, really, nowadays. So, there’s a lot of ways to do this. There are PHP projects that I looked at that do this with web sockets. There’s cloud solutions like AWS AppSync, there’s Google Firebase, there’s the option of just running your own GraphQL server, and some of these are really great solutions. Since I was already using API Platform, I wanted something simpler that integrated in easily with it. So, as I was browsing around the issue queue, and I saw people talking about this mysterious project that the main developer of API Platform is working on, that’s supposed to do this, and I asked what it was. And they told me it had been released recently, and they gave me this link. 

So, in this tab I have the project, Mercure. So, this was released very recently, and here you can see in the project description, server sent, live updates. So, I said cool—the guy who’s like the main developer of the project I’m using released a new project to do exactly what I need. 

So, I thought I’d check it out, and if you scroll down, you’ll see down here “Mercure in a Few Words.” And these are the selling points. 

So, some of these that are key for me, JWT-based authorization—this means that somebody who subscribes to my updates can only see updates that are meant to be shown to them. So, that means that, you know, somebody on another team can’t see what your team members are up to. So, that was pretty important for me. HTTP/2 multiplexing, it has Docker images available to get up and running quickly, and it is fast and written in Go. 

So, it’s a very new project. They say it’s production ready. In my experience, it works really well so far, but it wasn’t super easy to set up. So, I spent a number of hours figuring out how it works, and I thought I’d make a few videos to make that easier for other people just finding this project. And this video is the introduction video. In the next video we’ll look at Mercure alone, just showing how it works alone, with its demo UI. And then we’ll look at the—at creating a really simple API Platform project to communicate with it. And then in the last video we’ll build a super simple React demo to connect to API Platform, and to connect to Mercure to show posting to the API Platform project, and getting live updates from another browser. So, it’s gonna be a lotta fun, and I’ll see you in the next video.

[bright electronic music]