Zur Demonstration von HTML5-Websockets habe ich mit webbit einen einfachen WebSocket-Server geschrieben, der Nachrichten entgegen nimmt und diese Nachrichten wieder an den jeweiligen angemeldeten Client zurück schickt. Ein solches Beispiel nennt man auch Echo-Server.
Server
Server.java
1
2
3
4
5
6
7
8
9
10
11
12
13
| import org.webbitserver.WebServer;
import org.webbitserver.WebServers;
import org.webbitserver.handler.StaticFileHandler;
public class Server {
public static void main(String[] args) throws Exception {
WebServer webServer = WebServers.createWebServer(8080);
webServer.add(new StaticFileHandler("/static-files"));
webServer.add("/websocket-echo", new WebSocketSampleHandler());
webServer.start();
}
} |
import org.webbitserver.WebServer;
import org.webbitserver.WebServers;
import org.webbitserver.handler.StaticFileHandler;
public class Server {
public static void main(String[] args) throws Exception {
WebServer webServer = WebServers.createWebServer(8080);
webServer.add(new StaticFileHandler("/static-files"));
webServer.add("/websocket-echo", new WebSocketSampleHandler());
webServer.start();
}
}
WebSocketSampleHandler.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| import org.webbitserver.BaseWebSocketHandler;
import org.webbitserver.WebSocketConnection;
public class WebSocketSampleHandler extends BaseWebSocketHandler {
private int connections = 0;
@Override
public void onOpen(WebSocketConnection connection) {
this.connections++;
connection.send("This is the webserver saying Hello! :)<br/>"
+ "Total No. of subscribers: " + this.connections + ".");
}
@Override
public void onClose(WebSocketConnection connection) {
this.connections--;
}
@Override
public void onMessage(WebSocketConnection connection, String message) {
connection.send("The server has received the following message:<br/>"
+ message);
}
} |
import org.webbitserver.BaseWebSocketHandler;
import org.webbitserver.WebSocketConnection;
public class WebSocketSampleHandler extends BaseWebSocketHandler {
private int connections = 0;
@Override
public void onOpen(WebSocketConnection connection) {
this.connections++;
connection.send("This is the webserver saying Hello! :)<br/>"
+ "Total No. of subscribers: " + this.connections + ".");
}
@Override
public void onClose(WebSocketConnection connection) {
this.connections--;
}
@Override
public void onMessage(WebSocketConnection connection, String message) {
connection.send("The server has received the following message:<br/>"
+ message);
}
}
Dependencies from pom.xml
1
2
3
4
5
6
7
8
9
10
11
12
| <dependency>
<groupId>org.webbitserver</groupId>
<artifactId>webbit</artifactId>
<version>0.4.6</version>
<type>jar</type>
</dependency>
<dependency>
<groupId>org.jboss.netty</groupId>
<artifactId>netty</artifactId>
<version>3.2.7.Final</version>
<type>jar</type>
</dependency> |
<dependency>
<groupId>org.webbitserver</groupId>
<artifactId>webbit</artifactId>
<version>0.4.6</version>
<type>jar</type>
</dependency>
<dependency>
<groupId>org.jboss.netty</groupId>
<artifactId>netty</artifactId>
<version>3.2.7.Final</version>
<type>jar</type>
</dependency>
Client
connect.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5 WebSocket-Client</title>
<script>
var socket;
function sendMessage(){
var message = document.getElementById('userInput').value;
socket.send(message);
}
function showMessage(text) {
document.getElementById('message').innerHTML = text;
}
function subscribeToWebSocket(){
if('WebSocket' in window){
socket = new WebSocket('ws://localhost:8080/websocket-echo');
socket.onopen = function(){
showMessage('Connected to WebSocket.');
};
socket.onmessage = function(msg){
showMessage(msg.data);
};
socket.onerror = function(msg){
showMessage('Sorry but there was an error.');
};
socket.onclose = function(){
showMessage('Server offline.');
};
}else{
showMessage('Your browser does not support HTML5 WebSockets.');
}
}
</script>
</head>
<body onload="javascript:subscribeToWebSocket()">
<input id="userInput" type="text">
<button onclick="javascript:sendMessage()">Chat</button>
<div id="message"></div>
</body>
</html> |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5 WebSocket-Client</title>
<script>
var socket;
function sendMessage(){
var message = document.getElementById('userInput').value;
socket.send(message);
}
function showMessage(text) {
document.getElementById('message').innerHTML = text;
}
function subscribeToWebSocket(){
if('WebSocket' in window){
socket = new WebSocket('ws://localhost:8080/websocket-echo');
socket.onopen = function(){
showMessage('Connected to WebSocket.');
};
socket.onmessage = function(msg){
showMessage(msg.data);
};
socket.onerror = function(msg){
showMessage('Sorry but there was an error.');
};
socket.onclose = function(){
showMessage('Server offline.');
};
}else{
showMessage('Your browser does not support HTML5 WebSockets.');
}
}
</script>
</head>
<body onload="javascript:subscribeToWebSocket()">
<input id="userInput" type="text">
<button onclick="javascript:sendMessage()">Chat</button>
<div id="message"></div>
</body>
</html>
Das Beispiel funktioniert mit allen HTML5 WebSocket-kompatiblen Browser und wurde erfolgreich getestet mit Firefox 12.0 und Google Chrome 20.0.
Hi,
erst einmal besten Dank für das sehr gute Beispiel.
Gibt es eine Möglichkeit den Client, also in deinem Beispiel die HTML Seite auch in einem Netty server laufen zu lassen? Wie sieht dann hier die Verzeichnisstruktur aus? Bislang habe ich es mit einem Apache server getestet, aber der ist meiner Meinung nach übertrieben. Es wäre gut wenn man einen Server hat, der sowohl die Client als auch Server-Teil deployen kann.
Gruß,
Stefan
Hallo,
vielen Dank für das klein aber feine Beispiel. 🙂
viele Grüße.
Kaveh
Hi,
dankeschön für das nette Einführungsbeispiel 🙂
Ist es mit Webbit auch möglich einen Client zu schreiben rein in Java statt HTML5?
viele Grüße
Alex