DEV Community

Cover image for First Ever DEV Contest: Build a Realtime App with Pusher

First Ever DEV Contest: Build a Realtime App with Pusher

Jess Lee on May 01, 2018

Welcome to the first-ever DEV contest! Organizing an event like this is something we’ve been wanting to do for a while and we’re super excited to b...
Collapse
 
ben profile image
Ben Halpern

I think this is a great way to build a portfolio. Winners and runner-ups will all get ample recognition for their efforts.

I'll plan to make some threads where folks can chat through some ideas or get feedback. Look out for that in the coming days/weeks.

Otherwise happy to talk more about this here. We're building internally with the Pusher API and will be releasing details on that but I also plan to hack together something fun for the contest. I won't be eligible for the prize though 😄

Collapse
 
cdvillard profile image
Charles D. Villard

To clarify for the pedantics like myself, we're talking about using the Pusher APIs and not any specific dev.to endpoints correct? Or are those available for use in the contest and I'm just behind on how fast everything is growing here?

Collapse
 
zmarkan profile image
Zan Markan

Yeah - the idea is to build something with Pusher Channels. You'd control both the server and client components.

I don't know whether DEV.to expose any of their endpoints.

Collapse
 
lacanlale profile image
Jonathan Lacanlale

Awesome! If we submit mobile applications, should it be a video of the app working as the demo?

Collapse
 
ben profile image
Ben Halpern

You have freedom in terms of how you present the idea, but anything to best demonstrate it is a good idea. Videos, gifs, embeds, anything you can to show the submission in all its splendor.

Collapse
 
zmarkan profile image
Zan Markan

Hello everyone 👋 I'm a developer evangelist at Pusher.

I'm super proud to work with the DEV team on this, and eager to see what cool stuff you folks build this month!

I'm also available to answer any Pusher Channels related questions (and help out with any other questions where I can). Either tweet me @zmarkan me or email me at zan [at] pusher.com :)

Happy building!

Collapse
 
iyanuashiri profile image
Iyanuoluwa Ajao

Can we use any Pusher products for the app we build? For instance, I'm interested in the Textsync API. It is realtime and a Pusher product

Collapse
 
zmarkan profile image
Zan Markan

The requirement is that you use Channels, but you can of course use any other products as well 😉

Collapse
 
kayis profile image
K

Is the application state strongly consistent?

Collapse
 
rhymes profile image
rhymes

gif

Collapse
 
kayis profile image
K • Edited

Sounds cool.

So the constraints are using the channels API and not the chat/editor stuff.

And iff I got this correctly after reading the docs, the constraints of this API are:

  • 100 connections max
  • 200k msgs/day for all events
    • the delivered msgs are counted here, not the published ones
    • 10 connections * 1 msg published == 10 msg delivered

  • 10 msgs/sec for client events

  • 10 KB/msg
Collapse
 
zmarkan profile image
Zan Markan

Correct - for the submissions to qualify the projects need to use Channels.

Of course, you are free to use any other APIs or services as well - and that includes Pusher products :)

And regarding the limits in the free/sandbox tier:

The rest is correct

Collapse
 
ben profile image
Ben Halpern

I believe the 100 connections is specifically for the presence channels. I don't think that's a constraint on other uses of the product. But we'll get more of the Pusher folks in here to clarify anything.

Collapse
 
pmbanugo profile image
Peter Mbanugo

I think 10 connections * 1 message = 11 messages in total

Collapse
 
kayis profile image
K

Ah, right.

Collapse
 
carloslfu profile image
Carlos Galarza

Challenge accepted ;)

Collapse
 
ben profile image
Ben Halpern

Good luck!

Collapse
 
jess profile image
Jess Lee

🙌🙌🙌

Collapse
 
mehraas profile image
Ashish Mehra

This is amazing.I'm up for the contest 🙌

Collapse
 
jess profile image
Jess Lee

Whoo! Any idea of what you'll be building?!

Collapse
 
mehraas profile image
Ashish Mehra • Edited

Right now, I don't have any idea about the thing I'm going to build.But first thing I'll do is to understand the working of pusher 😁 .

Thread Thread
 
zmarkan profile image
Zan Markan

Excellent! 🚀
Feel free to ping me if you'd like me to clarify anything, and I invite you to check out our tutorials page for the inspiration.

Thread Thread
 
mehraas profile image
Ashish Mehra

Thanks! :-)

Collapse
 
stefannibrasil profile image
Stefanni Brasil

Oh my god, this is amazing!!

Collapse
 
ben profile image
Ben Halpern

Yay!

Collapse
 
vezyank profile image
Slava

How is pusher better than socket.io ?

Collapse
 
zmarkan profile image
Zan Markan

Hey, I'm a developer evangelist at Pusher.

I don't see it as a better/worse kind of deal.

Both Pusher Channels and socket.io allow you to publish and subscribe to messages in realtime using the WebSocket protocol.

The main difference is that Channels is a hosted service/API, and with socket.io you need to manage the deployment yourself.
In general, you need to do less work to get started with Channels, and once it comes to scaling that really becomes a LOT less work :)

Collapse
 
kayis profile image
K

The use-cases of Channels are also a bit more narrow.

It seems to me that the main idea behind channels is, that you publish changes from the server to the client.

For example, I change a blog-post and people on dev.to get notified that there was an update to that post.

While socket.io lets you publish events from the clients, that go over your server logic to other clients.

Thread Thread
 
zmarkan profile image
Zan Markan • Edited

While that's true for Public channels (the simplest use-case) - the Channels API supports client events too - using either Private or Presence channels.

pusher.com/docs/client_api_guide/c...

The tl;dr; version is:

  • You need to have some authorization logic implemented - so you know which user is which, and then you can trigger events from users.
  • You also need to enable them in the dashboard - it's under the App Settings tab
  • That's where the rate limiting (10 messages per user per second) comes into effect - as clients could generate a LOT of events very quickly
Thread Thread
 
kayis profile image
K

But can I control the client events on my server somehow?

For example, if I want to create a game, I need pipe the client events through some server side logic.

Thread Thread
 
zmarkan profile image
Zan Markan • Edited

You could do that using WebHooks, they allow you to capture all client events on the server - pusher.com/docs/webhooks#client_ev...

Alternatively you could create an API through which the clients would communicate, and the server would broadcast the events.
It really depends on your particular use-case, what kind of events will your clients be creating, and what makes the most sense for it.

Webhooks wouldn't for instance allow you to block client events, only observe them.

Thread Thread
 
vezyank profile image
Slava

How easy would it be to move from socket.io to pusher and vice-versa?

Thread Thread
 
zmarkan profile image
Zan Markan • Edited

As the core concepts of subscriptions, channels, and events are quite similar, it should be a fairly quick migration - but of course it all depends on your concrete project and implementation.

Thread Thread
 
kayis profile image
K • Edited

Is there a way to close user connections on the server?

Thread Thread
 
zmarkan profile image
Zan Markan

I'll double check but I don't think so.

You could send a message to a particular user that you wish to disconnect and handle that clientside.

What is your use-case for this?

Thread Thread
 
kayis profile image
K

I want to use presence channels for games. When a game is finished, the users should be removed from the channel.

Thread Thread
 
zmarkan profile image
Zan Markan

Ah yeah - just send a message that tells the clients to unsub from the channel, that should be the best way.

I've asked the team working on Channels and we don't support terminating connections from the server.

Thread Thread
 
kayis profile image
K

Well, guess for this contest it should be enough, thank you.

Collapse
 
midblue profile image
Jasper Stephenson

I'm curious to compare the two, also!

Collapse
 
zmarkan profile image
Zan Markan

Hey, I've answered it above: dev.to/zmarkan/comment/37jf

Collapse
 
yechielk profile image
Yechiel Kalmenson

Oooohhh, now to come up with an idea... 🤔

Collapse
 
jess profile image
Jess Lee

The hardest part 😉

Collapse
 
jordanosterberg profile image
Jordan Osterberg

Seems quite interesting. I'll definitely be submitting something!

Collapse
 
jess profile image
Jess Lee

🎉🎉🎉🎉🎉

Collapse
 
ben profile image
Ben Halpern

Awesome

Collapse
 
_shahroznawaz profile image
Shahroz Nawaz

I recently developed a small chat app for playing purpose:

Tools Used:

  1. Pusher
  2. Onesignal
  3. Toastr

This is basically a chat ap you can use random names and chat with people textually. Also, you will get toast/push notifications :D

Demo link: phpstack-71265-406587.cloudwaysapp...

You need to subscribe on the red icon on right side :D

Collapse
 
erikthered profile image
Erik Nelson

Is this contest individual or are we allowed to work in teams? My brother has been wanting to get into doing more development stuff so I thought this might be a good opportunity to work with him on something.

Collapse
 
jess profile image
Jess Lee

Hey Erik! You can absolutely work on teams but you'll have to share the prizing. Once you're ready, you can email me at jess@dev.to and I can include your brother as a co-author on your submission :)

Collapse
 
beard_corsini profile image
Andrew Corsini

Super excited for this! I just came up with an idea I want to implement, so this contest will be great at helping me drive this project. And this will be my first programming contest! Can't wait to see all the awesome submissions!

Collapse
 
jess profile image
Jess Lee

Whoo!!! 👏👏👏👏

Collapse
 
edet profile image
Abednego Edet • Edited

Started

Work

in Progress

Work In Progress
Collapse
 
zmarkan profile image
Zan Markan

Awesome! Eager to see what build! :)

Collapse
 
itmayziii profile image
Tommy May III

Alright after a couple days of thought, I’m thinking I’m doing a server monitoring app that reports real time memory, cpu, etc... usage etc... maybe integrate with digital ocean APIs to change the servers from the UI.

I’m thinking all JavaScript. Node JS and react on the front end( I don’t know react but it’s a good way to learn) and RxJS to show the data real time.

If anyone wants to pair on this, respond soon before I’m too far in development.

Collapse
 
deannaswallow profile image
Deanna Swallow

Fun!! :) Now if only I could think of something unique. Give me a few days.

Collapse
 
ben profile image
Ben Halpern

Yay! Look out for the idea thread 😄

Collapse
 
deannaswallow profile image
Deanna Swallow

I'm there! Let's do this!

Thread Thread
 
jess profile image
Jess Lee

🎉🎉🎉

Collapse
 
napoleon039 profile image
Nihar Raote

I've used Pusher once for my recent college project so I kind of know how it works😃. Now to come up with an awesome idea 🙌.

Just to be sure, we can make web apps too, or is it limited to mobile apps?

Collapse
 
zmarkan profile image
Zan Markan

Absolutely, all types of apps are equally welcome 📱💻⌚️🕹👾

Collapse
 
napoleon039 profile image
Nihar Raote

That's so cool! I've really got to come up with a good way to show the greatness of Pusher☺️

Thread Thread
 
zmarkan profile image
Zan Markan

Yaaay! 🚀Looking fwd to see what you build!

Collapse
 
yechielk profile image
Yechiel Kalmenson

$250 at the DEV.to shop, that's enough to buy every item on sale (if you combine it with the 25% off sustaining members get)... 😉

Collapse
 
peter profile image
Peter Kim Frank

Would definitely recommend the ol' one-of-each purchasing strategy! 😎🦄

Collapse
 
yechielk profile image
Yechiel Kalmenson

Unicorn included?

Collapse
 
rebirthtobi profile image
Tobi

I want to believe that this is not restricted to any geographical zone

Collapse
 
zmarkan profile image
Zan Markan • Edited

Of course - everyone is welcome!

(Unless you're in space 👩‍🚀👨‍🚀🚀🛰, last time I checked it was difficult to ship rewards up there. You'd need to land first).

Collapse
 
avalander profile image
Avalander

Question: if I plan on writing several posts to document the progress on my project, should I tag every post with pushercontest, or only the submitting entry?

Collapse
 
jess profile image
Jess Lee

Hey @avalander ! Go ahead and tag every post with pushercontest!

Collapse
 
avalander profile image
Avalander

Thanks! :)

Collapse
 
zmarkan profile image
Zan Markan

I would think so. You could link to the progress posts in the final submitting entry?

But maybe this is one for the DEV.to team to answer - they know the platform best.

Collapse
 
itmayziii profile image
Tommy May III

Really excited for this!

Collapse
 
_bigblind profile image
Frederik 👨‍💻➡️🌐 Creemers • Edited

I'm probably not going to enter multiple apps, but would that theoretically be allowed?

Collapse
 
zmarkan profile image
Zan Markan

It's 100% allowed, it's not a school exam 😉

Collapse
 
felixking profile image
Levitikon

So.. Where are the projects and where are the results? Who won? I'm really interested in seeing what came of this but I'm in the dark here.

Collapse
 
jess profile image
Jess Lee
Collapse
 
nektro profile image
Meghan (she/her)

Can't wait to submit something! Working on this now!

Collapse
 
himanshuc3 profile image
Himanshu

any React developers in the house...My app just doesn't seem to be working(only the pusher integration part).

Collapse
 
himanshuc3 profile image
Himanshu

Can we improve the app even if we've submitted the entry. Would the new version be judged?

Collapse
 
jess profile image
Jess Lee

Yep! We'll be reviewing submissions starting May 25 so you have up until then :)