# Sending value from maxmsp to p5js through socket.io

**URL:** https://discourse.processing.org/t/sending-value-from-maxmsp-to-p5js-through-socket-io/40312
**Category:** Libraries
**Tags:** homework
**Created:** [December 26, 2022, 8:29am UTC](https://discourse.processing.org/t/sending-value-from-maxmsp-to-p5js-through-socket-io/40312 "2022-12-26T08:29:05Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![AlfredChen](https://avatars.discourse-cdn.com/v4/letter/a/3bc359/32.png) [@AlfredChen](https://discourse.processing.org/u/AlfredChen)
#### Post date: [December 26, 2022, 8:29am UTC](https://discourse.processing.org/t/sending-value-from-maxmsp-to-p5js-through-socket-io/40312/1 "2022-12-26T08:29:05Z")

</div>

Goal: send radius value from maxmsp to p5js through [socket.io](http://socket.io)  
Current State: testing with index.html works well, but when changed to p5js client, I can’t see the result or reaction.

[socket.io](http://socket.io) server part

```auto
const express = require('express');
const app = express();
const http = require('http').Server(app);
const io = require('socket.io')(http);

app.get('/', (req, res) => {
    res.sendFile(__dirname + '/index.html');
})
//below use to solve the loading problem
app.use(express.static(__dirname + '/public'));

io.on('connection', (socket) => {
    console.log('new connection >> '+ socket.id);
    socket.on('disconnect',function(){
        console.log('disconnected >> '+socket.id);
    })
    socket.on('message', (msg) => {
        io.emit('message', msg);
    })
    socket.on('radius', (data) => {
        io.emit('radius',data);
    })
})

http.listen(3000, () => {
    console.log('listening on *:3000');
})

```

maxmsp client part

```auto
const maxApi = require('max-api');
const io = require('socket.io-client');

let socket;
maxApi.addHandler('connect', (url) => {
    socket = io(url);
});

maxApi.addHandler('disconnect', () => {
    socket.close();
});

maxApi.addHandler('message', (msg) => {
    socket.emit('message', msg);
});

```

index.html (works well and successfully console.log the value)

```auto
<html>
  <head>
    <script src="/p5js/demo.js" type="text/javascript"></script>
    <script src="/p5.js" type="text/javascript"></script>
    <link href="/styles.css" type="text/css" rel="stylesheet">
  </head>
  <body>
    <script src="/socket.io/socket.io.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function(){
        const socket = io();
        socket.on('message', function(msg){
        console.log(msg);
    });
    </script>
</body>
</html>

```

p5js client

```auto
let socket
let r = 50

function setup(){
    c = createCanvas(1280,720)
    background(0)
    socket = io.connnect('http://localhost:3000')
    console.log(socket.id)
    socket.on('message', drawCircle)
}
function drawCircle(msg){
    radius = int(msg)
    fill(255)
    ellipse(width/2,height/2,msg)
}
function setup(){
    background(10)
    noStroke()
    fill(255)
    ellipse(width/2,height/2,r)
}

```

---

<div class="post-metadata">

### Author: ![Chigoz](https://avatars.discourse-cdn.com/v4/letter/c/46a35a/32.png) [@Chigoz](https://discourse.processing.org/u/Chigoz)
#### Post date: [December 26, 2022, 10:53am UTC](https://discourse.processing.org/t/sending-value-from-maxmsp-to-p5js-through-socket-io/40312/2 "2022-12-26T10:53:38Z")

</div>

Looking at the code, there is no need for r and you shouldn’t have two set up functions, you should delete the second function setup.

This function should be like this;

function drawCircle(msg){  
fill(255)  
ellipse(width/2,height/2, msg)  
}

---

<div class="post-metadata">

### Author: ![AlfredChen](https://avatars.discourse-cdn.com/v4/letter/a/3bc359/32.png) [@AlfredChen](https://discourse.processing.org/u/AlfredChen)
#### Post date: [December 26, 2022, 12:10pm UTC](https://discourse.processing.org/t/sending-value-from-maxmsp-to-p5js-through-socket-io/40312/3 "2022-12-26T12:10:34Z")

</div>

To Chigoz  
Thank you for conquering the blind spots.  
I’ve edited the code and it is working normally.  
Many thanks to you. This problem bothered me few days.

---

<div class="post-metadata">

### Author: ![Chigoz](https://avatars.discourse-cdn.com/v4/letter/c/46a35a/32.png) [@Chigoz](https://discourse.processing.org/u/Chigoz)
#### Post date: [December 26, 2022, 3:19pm UTC](https://discourse.processing.org/t/sending-value-from-maxmsp-to-p5js-through-socket-io/40312/4 "2022-12-26T15:19:01Z")

</div>

You’re very welcome, good to know it worked for you.
