[Sharing is Fun] Max5 to HTML
Looking for a way to display a dynamic music sheet on any possible platform (including any computer, iPhone or any phone aso), I finally thought the more universal would be to use… a web browser !
And I came to a solution which seems to work. Maybe some of you, skilled Maxers came to something close to the system I describe below but I didn’t find any post about it on the list. So I thought that may interest some of you…
Here is the first prototype I came to :
The idea is the following :
-the Apache Server which receives a request from any browser executes a php script (nothing fancy here)
-the php script (with sockets extension of php) opens a udp port and waits (while loop) for a incoming message
-Max sends messages through a udpsend object (on the port opened in php of course)
-As soon as the php scripts receives a message, it parses it and closes the socket, allowing the apache server to finally send the page to the web browser
-the web page contains a in its header so it will refresh as soon as it’s done displaying. Then it restarts from the begin and waits for a new message from Max.
NB: Max and the Web (Apache + php) server do not actually need to be on the same machine (you may need to open the chosen port on your internet router if you do it through internet).
I haven’t tried this system on a large network or through internet yet but on a local network with various connexion types (ethernet and wifi) it works rather well with different browsers (Safari/FireFox/Opera/IE).
It is also rather well synchronised when displaying simultaneously on several machines (which is actually the most important point). But you need to open and send on a different port to each client (web browser) because of the php blocking loop.
That’s all folks !
But I’ll probably try to improve and consolidate that system. It opens some nice possibilities of network performances.
Any remark/critic/idea is of course welcome !
This sounds cool. Some miscellaneous comments:
The one port per client situation does not sound so good. If this is just for use with a small group of people and doesn’t need to scale up, then it probably doesn’t matter. But if it did need to scale up (maybe a performance/installation where people can access the page on their phones?), the solution would be to have a connection pool of a set number of udp ports. Each request coming in grabs an open connection from the pool and then returns it when done, or waits until a connection becomes available. Or you could do something else entirely…
If you don’t like ruby, you can do similar things with mxj. Nick Rothwell has a net.loadbang.web object for this sort of thing, or if you like python there’s probably something you could do with his jython object. Off the top of my head I don’t know of any embedded servers that do php.
i’ve been running such a system on a local network to monitor max patchs states on a web browser.
adam is right, the meta refresh method will give you blinking html pages. you have to use ajax in order to reload only some
i had great results using ‘data push’ mechanism with a JMS (Java Messages Service, i was using ActiveMQ : http://activemq.apache.org/). in this kind of system, client-side web browser doesn’t request for data (as it usually works with a web browser), but follows what’s called a ‘topic’. when a message arrives in the topic queue (on the server), the JMS ‘pushes’ it to every listener. this kind of solution is used to monitor real time data (rates, messages, meteorologic data, etc…) you should start here to learn how this works : http://www.eaipatterns.com/ObserverJmsExample.html.
(it will be more efficient than my quick explanation).
Thank you all for your replies !
Your advice about AJAX, prototype or jquery or JMS, ActiveMQ are very good leads ! I was actually looking for some stuff like this which would allow the web browser to actually "receive" messages at the right time instead of permanently listen.
So I’ll have a look into all of these and try at least some of them. Thank’s a lot.
Only one thing bothers me a bit : Apache/PHP is a very very usual configuration for a web server and does not require anything special on the client-side.
As for JMS I have, right now, absolutely no idea how it works but if it based on Java, it will probably exclude the iPhone which does not (yet) supports Java Applets. Or is it only on the server side ?
One more thing about WebServers embedded in Max (with mxj or ruby or python that does not matter). For that particular project I am working on, I am actually not entirely convinced that Max is the best way to drive the system. In fact, as it is about synchronously displaying music staves on several remote locations (+ some additional infos), the only thing I need is a sequencer/a timeline to trigger the display. So I could actually do that in almost any language !
But Max is very handy to test and design the system… especially with the Max5 transport system.
Anyway, I’ll have a look in those elements and improvements you suggested and keep you posted !
PS : @Adam : Yes, I knew from the begin that the "one port – one user" system is not a nice solution. And I’ll try to do better. I’m sure it’s possible.
However for the project I’m working on, I need exactly 4 clients in parallel, so choosing 4 ports will work as a first solution.
|BenCello wrote on Sun, 06 September 2009 09:50|
|Although AJAX is a client-side framework, I believe it still requires a specific server configuration. I am right ?|
No, not really. You just serve up prototype.js or jquery.js as a static file, and include it in the page via the HTML
It really depends on how you decide handle ajax requests. They look like a normal HTTP request but typically the server handles them differently. You could just send back chunks of HTML to update a section of the page. This would be easiest, and you can generate HTML as usual.
|For that particular project I am working on, I am actually not entirely convinced that Max is the best way to drive the system. ... So I could actually do that in almost any language !
But Max is very handy to test and design the system...
Yeah, there's lots of trade-offs either way. If you are interfacing with Max patches, then the embedded option can make Max-to-web communication a lot easier. But moving away from a solid apache setup and tightly coupling things to the Max environment has its downsides: it's definitely trickier to setup, and if you accidentally close the web server patch or Max crashes then the whole system goes down.
As far as programming in any language: if you use a ruby/java/python embedded server, you'd probably code most of the logic in that language. I tend to develop a lot of Ruby code that runs outside Max, and then hook things up to Max later when I want to interface with a patch.
I'm not saying any of these alternative are any better, just giving you some options in case you get stuck with you current approach.
Wow ! Thanks a lot Adam.
I’ll need a bit of time to think about and try several solutions (or combinations) you sketched…
But I’ll definitively continue to work on such a system even after the end of my current project. Because it really looks interesting and promising for a lot of different kind of interactive art.
I’ll keep you posted and hopefully this topic will help and give some ideas to a few other Maxers
|As for JMS I have, right now, absolutely no idea how it works but if it based on Java, it will probably exclude the iPhone which does not (yet) supports Java Applets. Or is it only on the server side ?|
with JMS, no java applet is required on the client side browser. all the java code is executed on the server.
there are some simple examples coming with ActiveMQ…
Another option that might be worth checking out is combining Ruby On Rails and Max.
If you run Rails with a sqlite database, it should even be possible to access it from and integrate with FTM using ftm.sqlite, with all the possibilities for web-based analysis of sound that it would open up for…
I’m using JSP with http://www.loadbang.net/space/Software/net.loadbang.web, and I have a question.
Does anybody knows how to change values in jweb without reloading the entire page? I think it soulf be done with ajax, but I have noi dea how it works.
I anybody knows plase answer!
Forums > MaxMSP