HTML5 WebSocket-Server mit Java und Client mit JavaScript

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();
  }
}

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);
  }
}

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>

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>

Das Beispiel funktioniert mit allen HTML5 WebSocket-kompatiblen Browser und wurde erfolgreich getestet mit Firefox 12.0 und Google Chrome 20.0.

3 Gedanken zu „HTML5 WebSocket-Server mit Java und Client mit JavaScript“

  1. 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

  2. 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

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.