Shiffman Daniel. Learning processing
Подождите немного. Документ загружается.
362 Learning Processing
import processing.net.*;
Client client;
e client constructor requires three arguments— “ this ” , referring again to this PApplet , the IP address we
want to connect to (as a String), and the port number (as an integer).
client = new Client(this, " 127.0.0.1 " , 5204);
If the server is running on a diff erent computer than the client, you will need to know the IP address of
that server computer. In addition, if there is no server running at the specifi ed IP and port, the Processing
sketch will give the error message: “ java.net.ConnectException: Connection refused ” meaning either the
server rejected the client or that there is no server.
Sending to the server is easy using the write( ) function.
client.write( " Hello! " );
Reading messages from the server is done with the read( ) function. e read( ) method, however, reads
from the server one byte at a time. To read the entire message as a String, readString( ) is used.
Before we can even contemplate reading from the server, we must be sure there is something to read. is
check happens with available( ). available( ) returns the number of bytes that are waiting to be read. We can
determine if there is anything waiting to be read by asking if the number of bytes is greater than zero.
if (client.available() > 0) {
String message = client.readString();
}
Using the code from Example 18-1 , (keyboard input), we can create a Processing client that connects and
communicates with our server, sending messages entered by the user. See Example 19-2.
Example 19-2: Simple therapy client
// Import the net libraries
import processing.net.*;
// Declare a client
Client client;
// Used to indicate a new message
float newMessageColor = 0;
// A String to hold whatever the server says
String messageFromServer = " " ;
// A String to hold what the user types
String typing = " " ;
PFont f;
void setup() {
size(400,200);
// Create the Client
client = new Client(this, " 127.0.0.1 " , 5204);
f = createFont( " Arial " ,16,true);
}
Type text and hit return to send to server.
How does processing make you feel?
fi g. 19.3
Connect to server at 127.0.0.1
(localhost), port 5204
Data Streams 363
void draw() {
background(255);
// Display message from server
fill(newMessageColor);
textFont(f);
textAlign(CENTER);
text(messageFromServer,width/2,140);
// Fade message from server to white
newMessageColor = constrain(newMessageColor + 1,0,255);
// Display Instructions
fill(0);
text( "Type text and hit return to send to server. ",width/2,60);
// Display text typed by user
fill(0);
text(typing,width/2,80);
// If there is information available to read
if (client.available() > 0) {
// Read it as a String
messageFromServer = client.readString();
// Set brightness to 0
newMessageColor = 0;
}
}
// Simple user keyboard input
void keyPressed() {
// If the return key is pressed, save the String and clear it
if (key == '\n') {
// When the user hits enter, write the sentence out to the Server
client.write(typing);
typing = " " ;
} else {
typing = typing + key;
}
}
Exercise 19-2: Create a client and server that talk to each other. Have the client send
messages typed by the user and the server respond autonomously. For example, you could use
String parsing techniques to reverse the words sent by the client. Client: “ How are you? ”
Server: “ You are how? ”
19.4 Broadcasting
Now that we understand the basics of how clients and servers work, we can examine more practical uses
of networked communication. In the therapist client/server examples, we treated the data sent across the
network as a String, but this may not always be the case. In this section, we will look at writing a server
that broadcasts numeric data to clients.
How is this useful? What if you wanted to continuously broadcast the temperature outside your house or
a stock quote or the amount of motion seen by a camera? You could set up a single computer running a
The new message fades
to white by increasing
the brightness.
We know there is a message from
the Server when there are greater
than zero bytes available.
When the user hits enter, the
String typed is sent to the Server.
364 Learning Processing
Processing server to process and broadcast that information. Client sketches from anywhere in the world
could connect to this machine to receive the information.
To demonstrate the framework for such a program, we will write a server that broadcasts a number
between 0 and 255 (we can only send one byte at time). We will then look at clients that retrieve the data
and interpret it in their own way.
Here is the server, which increments a number randomly and broadcasts it .
Example 19-3: Server broadcasting a number (0–255)
// Import the net libraries
import processing.net.*;
// Declare a server
Server server;
PFont f;
int data = 0;
void setup() {
size(200,200);
// Create the Server on port 5204
server = new Server(this, 5204);
f = createFont( " Arial " ,20,true);
}
void draw() {
background(255);
// Display data
textFont(f);
textAlign(CENTER);
fill(0);
text(data,width/2,height/2);
// Broadcast data
server.write(data);
// Arbitrarily changing the value of data randomly
data
= (data + int(random( – 2,4))) % 256;
}
// The serverEvent function is called whenever a new client connects.
void serverEvent(Server server, Client client) {
println( " A new client has connected: " + client.ip());
}
Next, we will write a client that receives the number from the server and uses it to fi ll a variable. e
example is written with the assumption that the server and the client are running on the same computer
(you can open both examples and run them together in Processing), but in a real world scenario this would
likely not be the case. If you choose to run the server and clients on diff erent computers, the machines
178
fi g. 19.4
The number is continuously sent
to all clients because write() is
called every cycle through draw().
Data Streams 365
must be networked locally (via a router or hub, ethernet or wifi ) or on the internet. e IP address can be
found in the network settings of your machine.
fi g. 19.5 Examples 19-3, 19-4, and 19-5 all running together
Example 19-4: Client reading values as background color
// Import the net libraries
import processing.net.*;
// Declare a client
Client client;
// The data we will read from the server
int data;
void setup() {
size(200,200);
// Create the Client
client = new Client(this, "127.0.0.1", 5204);
}
void draw() {
if (client.available() > 0) {
data = client.read(); // Read data
}
background(data);
}
The incoming data is used
to color the background.
366 Learning Processing
Example 19-5: Client reading values as rotation value
// Import the net libraries
import processing.net.*;
// Declare a client
Client client;
// The data we will read from the server
int data;
void setup() {
size(200,200);
smooth();
// Create the Client
client = new Client(this, " 127.0.0.1 " , 5204);
}
void draw() {
if (client.available() > 0) {
data = client.read(); // Read data
}
background(255);
stroke(0);
fill(175);
translate(width/2,height/2);
float theta = (data/255.0) *
rotate(theta);
rectMode(CENTER);
rect(0,0,64,64);
}
Exercise 19-3: Write a client that uses the number broadcast from the server to control the
location of a shape.
19.5 Multi-User Communication, Part 1: The Server
e broadcast example demonstrates one-way communication where a server broadcasts a message and
many clients receive that message. e broadcast model, however, does not allow a client to turn around
and send a reply back to the server. In this section, we will cover how to create a sketch that involves
communication between multiple clients facilitated by a server.
Let’s explore how a chat room works. Five clients (you and four friends) connect to a server. One client
types a message: “ Hey everyone! ” at message is sent to the server, which relays it back to all fi ve clients.
Most multi-user applications function in a similar fashion. A multiplayer online game, for example,
would likely have clients sending information related to their whereabouts and actions to a server that
broadcasts that data back to all other clients playing the game.
A multi-user application can be developed in Processing using the network library. To demonstrate, we
will create a networked, shared whiteboard. As a client drags its mouse around the screen, the sketch
The incoming data is
used to rotate a square.
TWO_PI;
Data Streams 367
will send X , Y coordinates to the server that passes them back to any other connected clients. Everyone
connected will be able to see the drawing actions of everyone else.
In addition to learning how to communicate between multiple clients, this example will explore how to
send multiple values. How can a client send two values (an X and a Y coordinate) and have the server
know which one is which?
e fi rst step toward a solution involves developing a protocol for communication between the clients. In
what format is the information sent and how is that information received and interpreted? Luckily for
us, the time we spent learning how to create, manage, and parse String objects in Chapters 17 and 18 will
provide all the tools we need.
Assume a client wants to send the mouse location: mouseX ⴝ 150 and mouseY ⴝ 125. We need to format
that information as a String in a way that is convenient to decipher. One possibility is as follows:
“ e fi rst number before the comma is the X location, the second number after the comma is 125. Our
data ends where an asterisk (*) appears. ”
In code, it would appear as follows:
String dataToSend = " 100,125*";
or, more generally:
String dataToSend = mouseX + " ," + mouseY + " *";
Here, we have developed a protocol for sending and receiving data. e integer values for mouseX and
mouseY are encoded as a String during sending (number, followed by comma, followed by number,
followed by asterisk). ey will have to be decoded upon receipt and we will get to that later. I should also
point out that most examples will typically use a newline or carriage return to mark the end of a message
(as we saw in the fi rst section of this chapter). We use an asterisk here for two reasons: (1) an asterisk is
plainly visible when displayed whereas newline is not (especially in the context of a book) and (2) using
an asterisk demonstrates that you can design and implement any messaging protocol you so choose as
long as it matches up in the client and server code.
What is really sent?
Data sent across a network is sent as a sequential list of individual bytes. Recalling the discussion
of data types in Chapter 4, a byte is an 8-bit number, that is, a number made up of eight 0’s and 1’s
or a value between 0 and 255.
368 Learning Processing
We are now ready to create a server to receive the messages from the client. It will be the client’s job to
format those messages with our protocol. e job of the server remains simple: (1) receive the data and
(2) relay the data. is is similar to the approach we took in Section 19.2.
Step 1 . Receiving data.
Client client = server.available();
if (client ! = null) {
incomingMessage = client. readStringUntil( ' * ' );
}
What is new in this example is the function readStringUntil( ) . e readStringUntil( ) function takes
one argument, a character. at character is used to mark the end of the incoming data. We are simply
following the protocol established during sending. We are able to do this because we are designing both
the server and the client.
Once that data is read, we are ready to add:
Step 2. Relaying data back out to clients.
Client client = server.available();
if (client ! = null) {
incomingMessage = client.readStringUntil( ' * ' );
server.write(incomingMessage);
}
Let’s assume we want to send the number 42. We have two options:
client.write(42); // sending the byte 42
In the line above, we are really sending the actual byte 42.
client.write( " 42 " ); // sending the String " 42 "
In the line above, we are sending a String . at String is made up of two characters, a ‘ 4 ’ and a ‘ 2 ’ .
We are sending two bytes! ose bytes are determined via the ASCII (American Standard Code
for Information Interchange) code, a standardized means for encoding characters. e character ‘ A ’
is byte 65, the character ‘ B ’ 66, and so on. e character ‘ 4 ’ is byte 52 and ‘ 2 ’ is 50.
When we read the data, it is up to us to know whether we want to interpret the bytes coming in
as literal numeric values or as ASCII codes for characters. We accomplish this by choosing the
appropriate read( ) function.
int val ⴝ client.read(); // matches up with client.write(42);
String s ⴝ client.readString(); // matches up with client.write( " 42 " );
int num ⴝ int(s); // convert the String that is read into a number
Because we designed our own
protocol and are not using
newline/carriage return to mark
the end of our message, we must
use readStringUntil() instead of
readString().
Writing the message back out to
all clients.
Data Streams 369
Here is the full Server with some bells and whistles. A message is displayed onscreen when new clients
connect as well as when the server receives data.
Example 19-6: Multi-user server
// Import the net libraries
import processing.net.*;
// Declare a server
Server server;
PFont f;
String incomingMessage = " " ;
void setup() {
size(400,200);
// Create the Server on port 5204
server = new Server(this, 5204);
f = createFont( "Arial",20,true);
}
void draw() {
background(255);
// Display rectangle with new message color
fill(0);
textFont(f);
textAlign(CENTER);
text(incomingMessage,width/2,height/2);
// If a client is available, we will find out
// If there is no client, it will be "null"
Client client = server.available();
// We should only proceed if the client is not null
if (client ! = null) {
// Receive the message
incomingMessage = client.readStringUntil( '*');
// Print to Processing message window
println( "Client says: " + incomingMessage);
// Write message back out (note this goes to ALL clients)
server.write(incomingMessage);
}
}
// The serverEvent function is called whenever a new client connects.
void serverEvent(Server server, Client client) {
incomingMessage = " A new client has connected: " + client.ip();
println(incomingMessage);
}
19.6 Multi-User Communication, Part 2: The Client
e client’s job is three-fold:
1. Send mouseX and mouseY coordinates to server.
2. Retrieve messages from server.
3. Display ellipses in the window based on server messages.
All messages received from
one client are immediately
relayed back out to all
clients with write().
370 Learning Processing
For Step 1, we need to adhere to the protocol we established for sending:
mouseX comma mouseY asterisk
String out = mouseX + " , " + mouseY + " * " ;
client.write(out);
e question remains: when is the appropriate time to send that information? We could choose to insert
those two lines of code into the main draw( ) loop, sending mouse coordinates every frame. In the case
of a whiteboard client, however, we only need to send the coordinates when the user drags the mouse
around the window.
e mouseDragged( ) function is an event handling function similar to mousePressed( ) . Instead of being
called when a user clicks the mouse, it is called whenever a dragging event occurs, that is, the mouse
button is pressed and the mouse is moving. Note the function is called continuously as a user drags the
mouse. is is where we choose to do our sending.
void mouseDragged() {
String out = mouseX + " , " + mouseY + " * " ;
// Send the String to the server
client.write(out);
// Print a message indicating we have sent data
println( " Sending: " + out);
}
Step 2, retrieving messages from the server, works much like the therapy client and broadcast client
examples. e only diff erence is the use of readStringUntil( ) , which follows the “ number-comma-
number-asterisk ” protocol.
if (client.available() > 0) {
// Read message as a String, all messages end with an asterisk
String in = client.readStringUntil( ' * ' );
//
Print message received
println( " Receiving: " + in);
}
Once the data is placed into a String object, it can be interpreted with parsing techniques from Chapter 18.
First, the String is split into an array of Strings using the comma (or asterisk) as the delimiter.
String[] splitUp = split(in, " ,* " );
e String array is then converted into an array of integers (length: 2).
int[] vals = int(splitUp);
And those integers are used to display an ellipse.
fill(255,100);
noStroke();
ellipse(vals[0],vals[1],16,16);
Put the String together with our
protocol:
mouseX comma mouseY asterisk.
Data Streams 371
Here is the entire client sketch:
Example 19-7: Client for multi-user whiteboard
// Import the net libraries
import processing.net.*;
// Declare a client
Client client;
void setup() {
size(200,200);
// Create the Client
client = new Client(this, "127.0.0.1", 5204);
background(255);
smooth();
}
void draw() {
// If there is information available to read from the Server
if (client.available() > 0) {
// Read message as a String, all messages end with an asterisk
String in = client.readStringUntil( '*');
// Print message received
println( "Receiving: " + in);
// Split up the String into an array of integers
int[] vals = int(splitTokens(in, ",*"));
// Render an ellipse based on those values
fill(0,100);
noStroke();
ellipse(vals[0],vals[1],16,16);
}
}
// Send data whenever the user drags the mouse
void mouseDragged() {
// Put the String together with our protocol: mouseX comma mouseY asterisk
String out = mouseX + " ," + mouseY + " *";
// Send the String to the server
client.write(out);
// Print a message indicating we have sent data
println("Sending: " + out);
}
19.7 Multi-User Communication, Part 3: All Together Now
When running a multi-user application, the order in which the elements are launched is important. e
client sketches will fail unless the server sketch is already running.
You should fi rst (a) identify the IP address of the server, (b) choose a port and add it to the server’s code,
and (c) run the server.
Afterward, you can launch the clients with the correct IP address and port.
The client reads messages from
the Server and parses them with
splitTokens() according to our
protocol.
A message is sent whenever the
mouse is dragged. Note that a client
will receive its own messages!
Nothing is drawn here!