# P5.js application with backend

**URL:** <https://discourse.processing.org/t/p5-js-application-with-backend/1295>\
**Category:** p5.js\
**Created:** [June 26, 2018, 10:39pm UTC](https://discourse.processing.org/t/p5-js-application-with-backend/1295 "2018-06-26T22:39:53Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![RichardDL](https://avatars.discourse-cdn.com/v4/letter/r/f475e1/32.png) [@RichardDL](https://discourse.processing.org/u/RichardDL)\
**Post date:** [June 26, 2018, 10:39pm UTC](https://discourse.processing.org/t/p5-js-application-with-backend/1295/1 "2018-06-26T22:39:53Z")

</div>

Hi,

I’ve been using Java Processing for some while, now tried the p5.js examples on Windows and RPi.

I’d like to be able to make a p5.js application on the RPi that auto-runs separately from the IDE, has a static url (not random :8xxx port), and comms to a backend. For the comms to backend I keep finding mention of websockets and node.js, but no simple get-going guide.

Thanks in advance,

Richard.

---

<div class="post-metadata">

**Author:** ![bmoren](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bmoren/32/68_2.png) [@bmoren](https://discourse.processing.org/u/bmoren)\
**Post date:** [June 27, 2018, 5:14pm UTC](https://discourse.processing.org/t/p5-js-application-with-backend/1295/2 "2018-06-27T17:14:08Z")

</div>

Here is a good get going guide!

> **[processing/p5.js](https://github.com/processing/p5.js/wiki/p5.js,-node.js,-socket.io)**
>
> p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Proces...

---

<div class="post-metadata">

**Author:** ![RichardDL](https://avatars.discourse-cdn.com/v4/letter/r/f475e1/32.png) [@RichardDL](https://discourse.processing.org/u/RichardDL)\
**Post date:** [June 27, 2018, 6:38pm UTC](https://discourse.processing.org/t/p5-js-application-with-backend/1295/3 "2018-06-27T18:38:54Z")

</div>

Yes, I’ve given it a glance and it looks good. I’ll go slowly though it. Thanks.

---

<div class="post-metadata">

**Author:** ![bmoren](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bmoren/32/68_2.png) [@bmoren](https://discourse.processing.org/u/bmoren)\
**Post date:** [June 28, 2018, 12:59am UTC](https://discourse.processing.org/t/p5-js-application-with-backend/1295/4 "2018-06-28T00:59:11Z")

</div>

It also looks like @lmccart just updated this a few hours ago, so it should be current and up to date!

good luck & happy coding!

---

<div class="post-metadata">

**Author:** ![matthewjohnjamieson](https://avatars.discourse-cdn.com/v4/letter/m/ecccb3/32.png) [@matthewjohnjamieson](https://discourse.processing.org/u/matthewjohnjamieson)\
**Post date:** [June 28, 2018, 4:46am UTC](https://discourse.processing.org/t/p5-js-application-with-backend/1295/5 "2018-06-28T04:46:22Z")

</div>

I’ve always had a lot of luck following the @shiffman tutorials, and there are a few on this sort of thing. Here is a node/sockets one:  
[https://youtu.be/bjULmG8fqc8](https://youtu.be/bjULmG8fqc8)

---

<div class="post-metadata">

**Author:** ![RichardDL](https://avatars.discourse-cdn.com/v4/letter/r/f475e1/32.png) [@RichardDL](https://discourse.processing.org/u/RichardDL)\
**Post date:** [September 22, 2018, 10:35am UTC](https://discourse.processing.org/t/p5-js-application-with-backend/1295/6 "2018-09-22T10:35:49Z")

</div>

Thanks @bmoren and @matthewjohnjamieson. I’ve copied the video and web examples, then a few of my own. It’s all good stuff.

One issue I have, is that the sketch examples refer to the host as localhost or 127.0.0.1 which is all good while everything is on one PC. Now I have server on RPi and web-page on PC or phone I put the server’s current IP address in the code. Is there a way for the web-page to get the server’s IP address?

---

<div class="post-metadata">

**Author:** ![julian2](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/julian2/32/1551_2.png) [@julian2](https://discourse.processing.org/u/julian2)\
**Post date:** [September 22, 2018, 6:24pm UTC](https://discourse.processing.org/t/p5-js-application-with-backend/1295/7 "2018-09-22T18:24:21Z")

</div>

If this is only on your local network (LAN), then you can make your rPI have a static IP on that network, that way it shouldn’t change and you can just memorise the IP on all the other machines 🙂

---

<div class="post-metadata">

**Author:** ![RichardDL](https://avatars.discourse-cdn.com/v4/letter/r/f475e1/32.png) [@RichardDL](https://discourse.processing.org/u/RichardDL)\
**Post date:** [October 10, 2018, 7:15pm UTC](https://discourse.processing.org/t/p5-js-application-with-backend/1295/8 "2018-10-10T19:15:57Z")

</div>

Yes, simply having static address works fine at home, but we also go to e.g. code-clubs. Anyway, at one of these events I met someone who knew the answer: socket = io.connect(location.host);

---

<div class="post-metadata">

**Author:** ![bmoren](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bmoren/32/68_2.png) [@bmoren](https://discourse.processing.org/u/bmoren)\
**Post date:** [October 23, 2018, 3:30pm UTC](https://discourse.processing.org/t/p5-js-application-with-backend/1295/9 "2018-10-23T15:30:05Z")

</div>

You should be able to just leave the connect() argument empty and it’ll by default try to connect to the same location it was served from. [https://socket.io/docs/client-api/#io-url-options](https://socket.io/docs/client-api/#io-url-options)

the connect/io argument is a `'url' *(String)* (defaults to 'window.location' )`

`let socket = io.connect();` should get you connected to `window.location` which should work flawlessly if you’re serving out your express and socket setup on the same port and url/ip

see here for an example:  
server: [https://github.com/bmoren/realtimewebapp/blob/master/app.js](https://github.com/bmoren/realtimewebapp/blob/master/app.js)  
client: [https://github.com/bmoren/realtimewebapp/blob/master/public/frontend.js](https://github.com/bmoren/realtimewebapp/blob/master/public/frontend.js)