Create a Website to connect to TouchDesigner
We now know the basics of request, and that the connection gets closed the moment the response is delivered. That is practical as the website will still be displayed when the client looses connection.
But what can we do to send information to the client even after the connection is closed?
We can create a different connection by the name of WebSockets, establisching id bidirectional link between client and browser.
To activate websockets in TouchDesigner you do not need to change anything as they are already enabled.
On our website we have to add some code. At first leads add a header and a script region to our site. The header is seperated from the body and loads before the body part. You can put scripts also in and after the body segment of the site. I personaly like to keep it organized in this way.
<head>
<script>
</script>
</head>From now on, we will work in the script tags. First lets define an empty variable for our websocket connection. We place it outside of the init function so we can access it later on in other functions. We can do that by simply using the var keyword and the name of the var, finished by a smicolon (they are not always neccesarry, but its best to just go with them.)
Afterwards we create a simple websocket_init function with the function keyword, creating a new WebSocket Object. The constructor (the creation method for our webSocket Connection) needs the address of our website, lead by ws for websocket, instead of http.
<script>
var ws;
function websocket_init(){
ws = new WebSocket('ws://localhost:9980');
}
</script>Note that blocks in JavaScript are enclosed in { } and do not need tabs like python to work. Otherwise both languages share similiarites we will see later.
But this function is not doing anything right now because we just defined it. We can define an onload function for our body by just putting onload = “websocket_init()” in the body header. So our body should be
<body onload = "websocket_init()">
<img src = "noise1" > </br>
<p>This is a TouchDesigner website</p>
</body>And lastly, lets put in something for us check if the connections actually got established.
In JavaScript you can define methods for objects on the fly. Alot of JavaScript objects do only have the most important functions actually defined. The rest is to be filles by us, the programmer.
One of this functions is the onopen function, which will be called the moment the connection is. as the name says, open.
For this, we will create a new function with the name websocket_open taking the argument event (this will be given when onopen is called.) (You can check many of that functions and needed arguments in the MDN Webdocks). Inside we will call the console.log(‘Websocket Open’) as a debug statement we can see. (To open the console, on Firefox press CTRL + SHIFT + K).
In our init function we set the onopen member of the WebSocket toour just created function.
var ws;
function websocket_open(event){
console.log('Websocket open')
}
function websocket_init(){
ws = new WebSocket('ws://localhost:9980');
ws.onopen = websocket_open;
}Refreshing the website with the console open should now display the text “Websocket Open” (and an error and a warning, ignore them for now.)
This means we have sucesfully opened a websocket connection. !
The complete Website now is
<html>
<head>
<script>
var ws;
function websocket_open(event){
console.log('Websocket open')
}
function websocket_init(){
ws = new WebSocket('ws://localhost:9980');
ws.onopen = websocket_open;
}
</script>
</head>
<body onload = "websocket_init()">
<img src = "noise1" > </br>
<p>This is a TouchDesigner website</p>
</body>
</html>