---
title: "Server-Client (Networking)"
source: "https://cheerpj.com/docs/tutorials/serverclient"
---
# Server-Client (Networking)
Communication between two Java apps using CheerpJ and Tailscale.
This tutorial runs two Java applications in the browser with CheerpJ, a server and a client, and connects them over TCP with `java.net.ServerSocket` and `java.net.Socket`. Browsers do not give web pages access to TCP sockets, so the two applications connect through a Tailscale network.
For how CheerpJ and Tailscale work together, see the [Networking guide](https://cheerpj.com/docs/guides/Networking.md). The finished project is in the `examples/Server-Client` directory of the [cheerpj-meta repository](https://github.com/leaningtech/cheerpj-meta).
## Prerequisites
- A text editor to create and edit an HTML file
- A local HTTP server that supports Range requests, such as `npx http-server`
- A modern browser such as Chrome, Edge, Firefox or Safari
- A Tailscale account (see [step 2](#2-tailscale))
## 1. The Java applications
The example is a chat room: a Java server application and a Java client application that exchange messages over sockets. It is based on a [TechVidvan](https://techvidvan.com/tutorials/) tutorial, which [explains the source code](https://techvidvan.com/tutorials/java-chat-application/).
Both applications run in the browser with CheerpJ, with no Java installation.
## 2. Tailscale
As the [Networking guide](https://cheerpj.com/docs/guides/Networking.md) explains, CheerpJ supports networking other than HTTP(S), such as TCP and UDP sockets, through Tailscale. Tailscale is a VPN based on WireGuard, which CheerpJ reaches over WebSockets.
### 2.1 Setting up Tailscale
Create a Tailscale network and connect both Java applications to it as _nodes_. In Tailscale terminology, a node is a combination of a user and a device connected to the network.
1. Create a Tailscale account and [log in](https://login.tailscale.com/). Creating an account creates a network (a _tailnet_).
2. Generate two auth keys, one for each application, in the [Tailscale admin console](https://login.tailscale.com/admin/settings/keys), or one reusable key. Keep them for later: the applications use them to join the tailnet.
> **Tailscale auth keys**
>
> Choose the options in the Tailscale keys menu that suit you. Each time a page starts CheerpJ with a key it adds a node to the tailnet. To keep within your Tailscale device quota, use ephemeral keys or remove unused devices from the admin console.
## 3. Setting up the project
Create a project directory with two subdirectories, one for the server and one for the client:
1. Create the project directory tree:
```bash
mkdir -p ServerClientTutorial/{Server,Client}
```
2. Put each application’s JAR in its directory:
- [Download the Server JAR](https://cheerpj.com/docs/cheerpj3/tutorials/Server.jar)
- [Download the Client JAR](https://cheerpj.com/docs/cheerpj3/tutorials/Client.jar)
3. Create an HTML file in each subdirectory: `server.html` in `Server` and `client.html` in `Client`. The project tree looks like this:
```plaintext
└──ServerClientTutorial
├── Server
│ ├── Server.jar
│ └── server.html
└── Client
├── Client.jar
└── client.html
```
### 3.1 The Server application
1. Add this code to `server.html`:
`server.html`
```html
Server
```
**What is happening here?**
- The `