Part of my project also involves websockets, and since I am in love with Pusher, I started using the service in my project. As I continued developing the web app (Google App Engine) and the client app (websockets), a part of the project was implementing Pusher’s new webhooks. After viewing the documentation for webhooks and the Channel Existence Event documentation, I attempted many times (over many hours) on how to develop my endpoint to handle the webhook. After many headaches, and the help of a friend, I figured it out! Perhaps, I was overlooking the simplicity, or failing to understand what was really going on, but I wanted to share my results with you in case you are in the same position I was in, especially since my copious amounts of Googling and researching returned very little helpful results. In this tutorial, I’m going to show you how to:
- Create the Endpoints API
- Configure Pusher to create the webhook
- Connect to Pusher
Create the Endpoints API
To begin, I’m assuming you have created a Google App Engine application and have an app.yaml. Inside the app.yaml file, you need to add the endpoints api handler:
Once you have defined this, you can go ahead and actually create your Endpoints API, which should look something like this:
As you can see, I’ve created the Class and defined the webhook method which will execute when Pusher sends a request to your app. Take a look at lines 32 – 37. For an example, I actually am triggering an event to Pusher when a user connects to say hey and welcome. A couple of things: One, you obviously are going to need the Pusher class to enable this, which I found on Pusher’s Git. Two, I don’t suggest doing triggers like this since it makes a REST API call to Pusher and is bad practices. I suggest creating a task queue which processes this Trigger.
Once you have done this, go ahead and deploy to your app on GAE and check the logs to make sure everything is working correctly and no errors were found. If that’s the case, then go to:
https://developers.google.com/apis-explorer/?base=https://[your-app-id].appspot.com/_ah/api and there you can view your API, which currently only consists of your pusher webhook. You can actually use this explorer to fake a pusher webhook request to make sure you get no errors.
Now it’s time to tell Pusher your webhook URL. There are many ways to find this URL. I suggest going to the explorer I just mentioned above and you can actually execute the API called and it will show you the url it POSTs to, which should be something like:
https://[your-app-id].appspot.com/_ah/api/my_api/v1/pusher/webhook. Assuming you have created your app on pusher, go to the webhook page:
https://app.pusherapp.com/apps/app_id/web_hooks. Under “Define a new WebHook”, add the api link, select the “Channel existence events” option and hit save.
Once you save, your new Webhook, you should be good to go! I suggest next going to the “Debug Console” tab and leaving it open so you can debug the next step easier.
Connect to Pusher
This will connect to pusher when executed. Once you go ahead and run the code, check out the Pusher Debug Console you left opened previously and make sure that you get the green box that says “Webhook sent”. If it’s not green, then hit the arrow on the left to see what data they are sending. Also, you can check the GAE logs to see the POST request from Pusher and hopefully get a glance of what went wrong.
So now you should be good to go connecting the Client, Pusher, and Google App Engine. The app I’m developing is partly Chrome extension, and I want access to other methods I have defined in my API. Google makes it so incredibly easy, that I’ll simply show you my code that allows me to make API calls.
First, you need to add the remote Google API:
Next, just call the load method and wait for it to load:
For a more in-depth look at using your API in Javascipt, check out the docs.
I hope this tutorial has made it a little easier on understanding how to use Pusher Webhooks with Google App Engine. I know for me, I wish I would have had more documentation specifically with GAE, so here it is, in my own words!
If you have any questions/comments, you can tweet me @benbeadle and I’ll respond promptly! Have a wonderful day!