1. Block 15 Developing the Calculator application
Jin Sa
2018/6/15
Client-server programming

2. Client-server programming
Outline
Objectives
Problem description
Structural design
Detailed design
Implementation –version 1
Partial GUI implementation –version 2
2018/6/15
Client-server programming

3. Objectives Help you to do the application part of the assignment
Calculator is a simplified version of last year’s assignment
The Calculator application is similar to this year’s assignment.
This year has an extra aspect – threads sharing the same data, i.e. the counter (not addressed in this unit, see the Thread lecture).

4. Problem description
See handout “CalculatoSimplifed.doc”.

5. Structural Design – client side

6. Structural Design – server side
Why do we want to have three classes?
Rationale?

7. Detailed Design – Protocol class
The state diagram needs revision because …

8. Implementation – version 1 (no GUI)

9. Implementation – version 1 (no GUI)
Pseudo code
Not addressing error detection. (you need to do error detection in your assignment.
2018/6/15
Client-server programming

10. Version 1 CalcServer- pseudo code
public class CalcServer {
main(String[] args) {
ServerSocket serverSocket;
boolean listening = true;
serverSocket = new ServerSocket(5555);
while (listening)
{Socket s= serverSocket.accept();
new CalcThread(s).start();}
serverSocket.close(); }

11. Version 1 CalcThread (1) - pseudo code
public class CalcThread extends Thread {
private Socket socket;
public CalcThread(Socket socket) {
super("CalcThread");
this.socket = socket; }

12. Version 1 CalcThread (2) - pseudo code
public void run() {
PrintWriter out =
new PrintWriter(socket.getOutputStream());
BufferedReader in = new BufferedReader(
new InputStreamReader( socket.getInputStream()));
CalcProtocol calculator = new CalcProtocol();
do {
outputLine = calculator.processInput(inputLine);
out.println(outputLine);
if (outputLine.equals("Bye")) { break;}
inputLine = in.readLine();
} while (!input.equals(“Bye"));
socket.close(); }

13. CalcProtocol (1) – pseudo code
public class CalcProtocol {
// Allowed states
private int WAITING_2_START = 0;
private int EXPECT_OPERATOR = 1;
private int EXPECT_2_NUMBERS = 2;
private char operation;
private String menu = "+ or – or e for Exit";
private int state = WAITING_2_START;

14. CalcProtocol (2) – pseudo code
public String processInput(String theInput) {
String theOutput = null;
switch (state) {
case WAITING_2_START:
theOutput = returnMenu();
break;
case EXPECT_OPERATOR:
theOutput = processOperator(theInput);
case EXPECT_2_NUMBERS:
theOutput = doOperation(theInput); }
return theOutput;

15. CalcProtocol (3) – pseudo code
private String processOperator(String s) {
c = s.charAt(0);
switch (c) {
case '+‘ and ‘-’:
operation = c;
out = "Enter 2 numbers: ";
state = EXPECT_2_NUMBERS;
break;
case 'e':
out = "Bye";
default:
out = "not validate operator, re-enter operator: "; }
return out;

16. CalcProtocol (4) – pseudo code
private String doOperation(String s) {
n1 = sc.nextInt();
n2 = sc.nextInt();
switch (operation) {
case '+':
out = Integer.toString(n1 + n2);
break;
case '-':
out = Integer.toString(n1 - n2); }
state=WAITING_2_START;
return "Answer = " + out;

17. CalcClient(1) – pseudo code
public class CalcClient {
public static void main(String[] args) {
String hostName = "localhost";
int port = 5555;
Socket socket = new Socket(hostName, port);
PrintWriter out =
new PrintWriter(socket.getOutputStream());
Scanner in=new Scanner(socket.getInputStream());
Scanner stdIn = new Scanner(System.in);
About connect
And set up the
input out streams

18. CalcClient(2) – pseudo code
About receive msg
while (true) {
fromServer = in.nextLine();
println("Server says: " + fromServer);
if (fromServer.equals("Bye")) break;
fromUser = stdIn.nextLine();
println("Client says: " + fromUser);
out.println(fromUser);
} // while
out.close();
in.close();
stdIn.close();
socket.close(); }
About send msg
About disconnect

19. Version 2 : Adding GUI to the client
No need to change the server side at all
Version 1: CalcClient mixture of IO with user and communication with the server
Version 2: separate IO with user from the communication with the server:
CalcClient2: communicate with server
CalcClientGUI: communicate with user

20. Version 2 : Adding GUI to the client
CalcClient2: change the main into some specific methods:
Connect
Disconnect
Send
Receive
CalcClientGUI: IO with user is done via a JFrame; it drives CalcClient2
2018/6/15
Client-server programming

21. Revised structural design on client side
2018/6/15
Client-server programming

22. Implementation – version 2 with GUI

23. CalcClient2(1) – pseudo code
public class CalcClient2 {
private String hostName = "localhost";
private int port = 5555;
private Socket socket = null;
private PrintWriter out = null;
private Scanner in = null; // from server
private Scanner stdIn = new Scanner(System.in);
private String fromServer;
private String fromUser;

24. CalcClient2(2) – pseudo code
public void connect() { socket = new Socket(hostName, port); out = new PrintWriter(socket.getOutputStream()); in = new Scanner(socket.getInputStream()); } public void disconnect() { out.close(); in.close(); stdIn.close(); socket.close();
2018/6/15
Client-server programming

25. CalcClient2(3) – pseudo code
public void sendToServer(String msg) { out.println(msg); } public String receiveFromServer() { return in.nextLine();
2018/6/15
Client-server programming

26. CalcClientGUI Use Netbeans Form editor to create the interface (demo)
For each event, implement the appropriate event handler.
In the event handler, call the corresponding methods in CalcClient2 to communicate with the serever (I.e. Linking the GUI to the client and therefore the server.)

27. Linking the GUI to CalcClient2
Change this:
private void connectButtonActionPerformed(
java.awt.event.ActionEvent evt) {
// TODO add your handling code here: }
To:
client.connect();
String msg = client.receiveFromServer();
serverTextArea.setText(msg);
2018/6/15
Client-server programming