By

文章目錄
  1. 1. Concpet
    1. 1.1. Message Oriented Middleware (MOM)
    2. 1.2. Reactive Programming
    3. 1.3. websocket
      1. 1.3.1. RFC 6455
        1. 1.3.1.1. 5.2 Base Framing Protocol
      2. 1.3.2. websocket communication by Java (server-side)
  2. 2. Server (message broker, gateway)
    1. 2.1. jWebsocket
    2. 2.2. php
      1. 2.2.1. Reference
    3. 2.3. GlassFish implements WebSocket over TLS
      1. 2.3.1. preview
      2. 2.3.2. server configuration
      3. 2.3.3. server-side
      4. 2.3.4. client-side: Web
      5. 2.3.5. client-side : Android
    4. 2.4. JBoss-Eclipse development Env. setup
      1. 2.4.1. Environment
      2. 2.4.2. Setup Steps
    5. 2.5. GlassFish-Eclipse development Env. setup
      1. 2.5.1. Environment
      2. 2.5.2. Setup Steps
      3. 2.5.3. Spring
    6. 2.6. Nginx as reverse proxy
      1. 2.6.1. Reference
  3. 3. Cloud Service (SaaS)
  4. 4. Protocol
    1. 4.1. Refernces
  5. 5. whatsapp
    1. 5.1. Erlang

Concpet

Message Oriented Middleware (MOM)

Asynchronous Messaging, fire-and-forget, evnet-driven architechure

Systems that rely upon synchronous requests typically have a limited ability to scale because eventually requests will begin to back up, thereby slowing the whole system.

Refernces

Reactive Programming

websocket

RFC 6455

ieft official

5.2 Base Framing Protocol

Let’s examin our framing logic base by rfc6455 framing protocol as below.

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
$msg = 'hi';

echo bstr2bin(frame($msg));

function frame($s) {
  // our framing logic
  $a = str_split($s, 125);
  if (count($a) == 1) {
    return "\x81".chr(strlen($a[0])).$a[0];
  }

  $ns = "";
  foreach ($a as $o) {
    $ns .= "\x81".chr(strlen($o)).$o;
  }
  return $ns;
}

function bstr2bin($input)
// Binary representation of a binary-string
{
  if (!is_string($input)) return null; // Sanity check

  // Unpack as a hexadecimal string
  $value = unpack("H*", $input);

  // Output binary representation
  return base_convert($value[1], 16, 2);
}

while sent hi as message, the output would be 10000001000000100110100001101001 in binary. Let’s fill in base frame protocol table as below.

1
2
3
4
5
6
7
8
9
10
0                   1                   2                   3
0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
+-+-+-+-+-------+-+-------------+-------------------------------+
|F|R|R|R| opcode|M| Payload len |         payload Data (hi)     |
|I|S|S|S|  (4)  |A|     (7)     |             (16)              |
|N|V|V|V|       |S|             |                               |
| |1|2|3|       |K|             |                               |
+-+-+-+-+-------+-+-------------+-------------------------------+
|1|0|0|0|0 0 0 1|0|0 0 0 0 0 1 0|0 1 1 0 1 0 0 0 0 1 1 0 1 0 0 1|
+-+-+-+-+-------+-+-------------+-------------------------------+

\x81 are 2 hex; 10000001 in binary.

FIN=1 denotes a final frame

FIN: 1 bit

Indicates that this is the final fragment in a message. The first
fragment MAY also be the final fragment.

RSV1=0
RSV2=0
RSV3=0

RSV1~3 are set to 0, denotes we don’t use any extension.

RSV1, RSV2, RSV3: 1 bit each

MUST be 0 unless an extension is negotiated that defines meanings for non-zero values. If a nonzero value is received and none of the negotiated extensions defines the meaning of such a nonzero value, the receiving endpoint MUST _Fail the WebSocket Connection_.

opcode=0001 denotes a text frame

Opcode: 4 bits

Defines the interpretation of the “Payload data”. If an unknown opcode is received, the receiving endpoint MUST _Fail the WebSocket Connection_. The following values are defined.

*  %x0 denotes a continuation frame

*  %x1 denotes a text frame

*  %x2 denotes a binary frame

*  %x3-7 are reserved for further non-control frames

*  %x8 denotes a connection close

*  %x9 denotes a ping

*  %xA denotes a pong

*  %xB-F are reserved for further control frames

chr(strlen($a[0])) returns a specific charater according to frame length, since we limit frame length to 125, first binary would be 0.

Mask=0 denotes no mask

Mask: 1 bit

Defines whether the “Payload data” is masked. If set to 1, a
masking key is present in masking-key, and this is used to unmask
the “Payload data” as per Section 5.3. All frames sent from
client to server have this bit set to 1.

Payload length= 0000010
in this example, ‘hi’ is a 2 charater data, ‘0000010’ in binary.

Payload length: 7 bits, 7+16 bits, or 7+64 bits

The length of the “Payload data”, in bytes: if 0-125, that is the
payload length. If 126, the following 2 bytes interpreted as a
16-bit unsigned integer are the payload length. If 127, the
following 8 bytes interpreted as a 64-bit unsigned integer (the
most significant bit MUST be 0) are the payload length. Multibyte
length quantities are expressed in network byte order. Note that
in all cases, the minimal number of bytes MUST be used to encode
the length, for example, the length of a 124-byte-long string
can’t be encoded as the sequence 126, 0, 124. The payload length
is the length of the “Extension data” + the length of the
“Application data”. The length of the “Extension data” may be
zero, in which case the payload length is the length of the
“Application data”.

Payload Data=0110100001101001
since we limit our frame length to 125, the remaining bytes are payload.
01101000 is ‘h’ in binary
01101001 is ‘i’ in binary

Application data: y bytes

Arbitrary “Application data”, taking up the remainder of the frame
after any “Extension data”. The length of the “Application data”
is equal to the payload length minus the length of the “Extension
data”.

Note: Further discussion would be needed while migration to another platform language which already implements WebSocket (like Java).

Refernces

websocket communication by Java (server-side)

Server (message broker, gateway)

alternatives

消息队列软件产品大比拼
What are the differences between JBoss, GlassFish, and Apache Tomcat servers?

jWebsocket

jWebsocket official site
jWebSocket JMS based Cluster

php

Reference

Laravel 4 Real Time Chat

GlassFish implements WebSocket over TLS

This example demostrate a echo server peroidically return server time via websocket connection.

preview



server configuration

web.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?xml version="1.0" encoding="UTF-8"?>
...
  <security-constraint>
    <web-resource-collection>
      <web-resource-name>Protected resource</web-resource-name>
      <url-pattern>/*</url-pattern>
      <http-method>GET</http-method>
    </web-resource-collection>

    <!-- https -->
    <user-data-constraint>
      <transport-guarantee>CONFIDENTIAL</transport-guarantee>
    </user-data-constraint>
  </security-constraint>
</web-app>

server-side

EchoEndpoint.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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
package tw.henry.websocket;

import java.io.IOException;
import java.time.LocalTime;
import java.time.format.DateTimeFormatter;
import java.util.Set;
import java.util.concurrent.Executors;
import java.util.concurrent.ScheduledExecutorService;
import java.util.concurrent.ScheduledFuture;
import java.util.concurrent.TimeUnit;
import java.util.logging.Level;
import java.util.logging.Logger;

import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;


@ServerEndpoint("/echo")
public class EchoEndpoint {
	private static final Logger LOG = Logger.getLogger(EchoEndpoint.class.getName());

	private static Set<Session> allSessions;

	static ScheduledExecutorService timer =
		       Executors.newSingleThreadScheduledExecutor();
	DateTimeFormatter timeFormatter =  
	          DateTimeFormatter.ofPattern("HH:mm:ss");

	ScheduledFuture<?> result;
	@OnMessage
	public String echo(String message) {
	    return message + " (from your server)";
	}

	@OnOpen
	public void connectionOpened(Session session) {
		LOG.log(Level.INFO, "WebSocket opened: "+session.getId());

		allSessions = session.getOpenSessions();

		if (allSessions.size()==1){   
	        result = timer.scheduleAtFixedRate(
	             () -> sendTimeToAll(session),0,10,TimeUnit.SECONDS);    
	    }
	}

	private void sendTimeToAll(Session session){       
	     allSessions = session.getOpenSessions();
	     for (Session sess: allSessions){          
	        try{   
	          sess.getBasicRemote().sendText("Hi, give me some thing to echo (Server time: " +
	                    LocalTime.now().format(timeFormatter)+")");
	          } catch (IOException ioe) {        
	              System.out.println(ioe.getMessage());         
	          }   
	     }  
	}

	@OnClose
	public void connectionClosed() {
		result.cancel(true);
		LOG.log(Level.INFO, "connection closed");
	}
}

client-side: Web

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>

<body>
  <meta charset="utf-8">
  <title>Web Socket JavaScript Echo Client</title>
  <script language="javascript" type="text/javascript">
    var endpointPath = "/echo";
    var wsUri = getRootUri() + endpointPath;
    var websocket;
    /**
     * Get application root uri with ws/wss protocol.
     *
     * @returns {string}
     */
    function getRootUri() {
      var uri = "wss://" + (document.location.hostname == "" ? "localhost" : document.location.hostname) + ":" +
        (document.location.port == "" ? "8181" : document.location.port);

      var pathname = window.location.pathname;

      if (endsWith(pathname, "/index.html")) {
        uri = uri + pathname.substring(0, pathname.length - 11);
      } else if (endsWith(pathname, "/")) {
        uri = uri + pathname.substring(0, pathname.length - 1);
      }

      return uri;
    }

    function endsWith(str, suffix) {
      return str.indexOf(suffix, str.length - suffix.length) !== -1;
    }

    function init() {
      output = document.getElementById("output");
    }

    function send_echo() {
      if (!websocket) {

        websocket = new WebSocket(wsUri);

        websocket.onopen = function(evt) {
          onOpen(evt)
        };
        websocket.onmessage = function(evt) {
          onMessage(evt)
        };
        websocket.onerror = function(evt) {
          onError(evt)
        };
        websocket.onclose = function(evt) {
          onClose(evt);
        }
      }
      // doSend(textID.value);
      sendMessage(textID.value);
    }

    function onOpen(evt) {
      writeToScreen("CONNECTED");
    }

    function onMessage(evt) {
      writeToScreen("RECEIVED: " + evt.data);
    }

    function onClose(evt) {
      writeToScreen("CLOSED: " + evt.code + ": " + evt.reason);
    }

    function onError(evt) {
      writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
    }

    function doSend(message) {
      console.log(websocket);
      writeToScreen("SENT: " + message);
      websocket.send(message);
    }

    function sendMessage(msg) {
      waitForSocketConnection(websocket, function() {
    	    writeToScreen("SENT: " + msg);
        websocket.send(msg);
      });
    };

    function waitForSocketConnection(socket, callback) {
      setTimeout(
        function() {
          if (socket.readyState === WebSocket.OPEN) {
            if (callback !== undefined) {
              callback();
            }
            return;
          } else {
            waitForSocketConnection(socket, callback);
          }
        }, 5);
    };

    function writeToScreen(message) {
      var pre = document.createElement("p");
      pre.style.wordWrap = "break-word";
      pre.innerHTML = message;
      //alert(output);
      output.appendChild(pre);
    }

    window.addEventListener("load", init, false);
  </script>

  <h2 style="text-align: center;">Web Socket Echo Client</h2>

  <div style="text-align: center;">
    <img style=" width: 64px; height: 64px;" alt="" src="HTML5_Logo_512.png">
  </div>
  <br/>

  <div style="text-align: center;">
    <form action="">
      <input onclick="send_echo()" value="Press me" type="button">
      <input id="textID" name="message" label="message" value="Hello Web Sockets !" type="text">
      <br>
    </form>
  </div>
  <div id="output"></div>
</body>

</html>

client-side : Android

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
import android.os.Build;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.View;
import android.widget.EditText;
import android.widget.TextView;

import org.java_websocket.client.DefaultSSLWebSocketClientFactory;
import org.java_websocket.client.WebSocketClient;
import org.java_websocket.drafts.Draft_17;
import org.java_websocket.handshake.ServerHandshake;

import java.net.URI;
import java.net.URISyntaxException;

import javax.net.ssl.SSLContext;
import javax.net.ssl.TrustManager;
import javax.net.ssl.X509TrustManager;


public class MainActivity extends AppCompatActivity {
    private WebSocketClient mWebSocketClient;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        try {

 //           connectWebSocket(new URI("ws://10.0.3.2:8080/tm.EchoServer/echo"),false);
//           connectWebSocket(new URI("wss://10.0.3.2:8181/tm.EchoServer/echo"),true);
//           connectWebSocket(new URI("ws://10.0.1.147:8080/tm.EchoServer/echo"),false);
           connectWebSocket(new URI("wss://10.0.1.147:8181/tm.EchoServer/echo"),true);

        } catch (URISyntaxException e) {
            e.printStackTrace();
        }
    }

    private void connectWebSocket(URI uri, boolean overTLS) {


        mWebSocketClient = new WebSocketClient(uri, new Draft_17()) {
            @Override
            public void onOpen(ServerHandshake serverHandshake) {
                Log.i("Websocket", "Opened");
                mWebSocketClient.send("Hello from " + Build.MANUFACTURER + " " + Build.MODEL);
            }

            @Override
            public void onMessage(String s) {
                final String message = s;
                runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        TextView textView = (TextView)findViewById(R.id.messages);
                        textView.setText(textView.getText() + "\n" + message);
                    }
                });
            }

            @Override
            public void onClose(int i, String s, boolean b) {
                Log.i("Websocket", "Closed " + s);
            }

            @Override
            public void onError(Exception e) {
                Log.i("Websocket", "Error " + e.getMessage());
            }
        };

        if (overTLS) {
            /***************************************************************************/
            //This part is needed in case you are going to use self-signed certificates
            TrustManager[] trustAllCerts = new TrustManager[]{new X509TrustManager() {
                @Override
                public void checkClientTrusted(java.security.cert.X509Certificate[] chain, String authType) throws java.security.cert.CertificateException {

                }

                @Override
                public void checkServerTrusted(java.security.cert.X509Certificate[] chain, String authType) throws java.security.cert.CertificateException {

                }

                public java.security.cert.X509Certificate[] getAcceptedIssuers() {
                    return new java.security.cert.X509Certificate[]{};
                }

            }};
            /**************************************************************************/
            try {
                SSLContext sc = SSLContext.getInstance("TLS");
                sc.init(null, trustAllCerts, new java.security.SecureRandom());

                //Otherwise the line below is all that is needed.
                //sc.init(null, null, null);
                mWebSocketClient.setWebSocketFactory(new DefaultSSLWebSocketClientFactory(sc));
            } catch (Exception e) {
                e.printStackTrace();
            }
        }

        mWebSocketClient.connect();
    }

    public void sendMessage(View view) {
        EditText editText = (EditText)findViewById(R.id.message);
        mWebSocketClient.send(editText.getText().toString());
        editText.setText("");
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        mWebSocketClient.close();

    }
}

Reference
Connect and transfer data with secure WebSockets in Android

JBoss-Eclipse development Env. setup

Environment

  1. JDK 8

    1
    2
    3
    4
    $ java -version
    java version "1.8.0_45"
    Java(TM) SE Runtime Environment (build 1.8.0_45-b14)
    Java HotSpot(TM) 64-Bit Server VM (build 25.45-b02, mixed mode)

  2. JBoss Enterprise Application Platform 6.4

  3. Eclipse (Mars Release) IDE for Java EE Developers

Setup Steps

  1. Download JBoss EPA
  2. installation





  3. Download JBoss Development Studio in marketplace

  4. add JBoss server in eclipse



  5. Run JBoss server in eclipse, visit http://localhost:8080

GlassFish-Eclipse development Env. setup

Environment

  1. JDK 8

    1
    2
    3
    4
    $ java -version
    java version "1.8.0_45"
    Java(TM) SE Runtime Environment (build 1.8.0_45-b14)
    Java HotSpot(TM) 64-Bit Server VM (build 25.45-b02, mixed mode)

  2. GlassFish 4 Java EE 7 Full Platform

  3. Eclipse (Mars Release) IDE for Java EE Developers

Setup Steps

  1. goto Eclipse preferences hotkey: cmd+,, preferences->Server->Runtime Environment->Add…

  2. no glashfish environment runtime found, click Download additional server adapters

  3. choose GlassFish Tools

  4. restart Eclipse after installaction completes

  5. repeat step 1.~2., GlassFish runtime should appear, choose GlassFish 4

  6. locate your glassfish4 path

  7. use Wizard to create GlassFish Server hotkey: cmd+n

  8. choose GlassFish 4

  9. setup administrator name and password, finish setup

  10. Start Server

  11. visit http://localhost:8080/ to see if GlassFish works properly.

Refernces

Multiple JDK in Mac OSX 10.10 Yosemite

Eclipse Marketplace GlassFish Tools

GlassFish Download Page

JDK Download Page

Eclipse download Page

Spring

Spring 4 WebSocket + SockJS + STOMP + Tomcat Example
Test Microsoft Edge and versions of IE6 through IE11 using free virtual machines you download and manage locally.

Nginx as reverse proxy

Reference

nginx WebSocket Proxy
NGINX to reverse proxy websockets AND enable SSL (wss://)?
NGINX as a WebSocket Proxy

Cloud Service (SaaS)

Scaling Secret: Real-time Chat

Protocol

By using standard protocol instead of proprietary one, we could leverage lots of client and server implementations to quickly build our app.

  • STOMP: Simple (or Streaming) Text Oriented Messaging Protocol
    • it’s not always straightforward to port code between brokers
  • XMPP : Extensible Messaging and Presence Protocol
  • AQMP : Advanced Message Queuing Protocol
    • Except puducer,broker,consumer(like JMS), AQMP introduce new component ‘exchange’
  • MQTT : Message Queue Telemery Transport
    • Can be applied to IoT, such as connecting an Arduino device to a web service with MQTT.
  • JMS : Java Message Service
  • Protocol Buffers

Refernces

Message Queue Evaluation Notes
Choosing Your Messaging Protocol: AMQP, MQTT, or STOMP

whatsapp

The WhatsApp Architecture Facebook Bought For $19 Billion - High Scalability -
INSIDE ERLANG, THE RARE PROGRAMMING LANGUAGE BEHIND WHATSAPP’S SUCCESS
What is the technology behind the web-based version of WhatsApp?

  • chat history is only stored on phone, none on server. Thus, to use the web client your smartphone has to be connected to the internet.
  • What protocol is used in Whatsapp app? SSL socket to the WhatsApp server pools.
  • Erlang/FreeBSD-based server infrastructure
    • Server systems that do the backend message routing are done in Erlang.
      • Ericsson engineer Joe Armstrong developed Erlang with the logic of telecommunications in mind: millions of parallel conversations happening at the same time, with almost zero tolerance for downtime.
      • Erlang allows for bug fixes and updates without downtime.
      • Erlang is very good at efficiently executing commands across processors within a single machine.
    • Great achievement is that the number of active users is managed with a really small server footprint. Team consensus is that it is largely because of Erlang.
    • Interesting to note Facebook Chat was written in Erlang in 2009, but they went away from it because it was hard to find qualified programmers.
  • WhatsApp server has started from ejabberd
    • Ejabberd is a famous open source Jabber server written in Erlang.
    • Originally chosen because its open, had great reviews by developers, ease of start and the promise of Erlang’s long term suitability for large communication system.
    • The next few years were spent re-writing and modifying quite a few parts of ejabberd, including switching from XMPP to internally developed protocol, restructuring the code base and redesigning some core components, and making lots of important modifications to Erlang VM to optimize server performance.
  • A primary gauge of system health is message queue length. The message queue length of all the processes on a node is constantly monitored and an alert is sent out if they accumulate backlog beyond a preset threshold. If one or more processes falls behind that is alerted on, which gives a pointer to the next bottleneck to attack.
  • Multimedia messages are sent by uploading the image, audio or video to be sent to an HTTP server and then sending a link to the content along with its Base64 encoded thumbnail (if applicable).

    Erlang

  • The basic unit of concurrency in Erlang is the process.
  • An Erlang process is a little virtual machine that can evaluate a single Erlang function; it should not be confused with an operating system process.
  • cannot rebind variable.
文章目錄
  1. 1. Concpet
    1. 1.1. Message Oriented Middleware (MOM)
    2. 1.2. Reactive Programming
    3. 1.3. websocket
      1. 1.3.1. RFC 6455
        1. 1.3.1.1. 5.2 Base Framing Protocol
      2. 1.3.2. websocket communication by Java (server-side)
  2. 2. Server (message broker, gateway)
    1. 2.1. jWebsocket
    2. 2.2. php
      1. 2.2.1. Reference
    3. 2.3. GlassFish implements WebSocket over TLS
      1. 2.3.1. preview
      2. 2.3.2. server configuration
      3. 2.3.3. server-side
      4. 2.3.4. client-side: Web
      5. 2.3.5. client-side : Android
    4. 2.4. JBoss-Eclipse development Env. setup
      1. 2.4.1. Environment
      2. 2.4.2. Setup Steps
    5. 2.5. GlassFish-Eclipse development Env. setup
      1. 2.5.1. Environment
      2. 2.5.2. Setup Steps
      3. 2.5.3. Spring
    6. 2.6. Nginx as reverse proxy
      1. 2.6.1. Reference
  3. 3. Cloud Service (SaaS)
  4. 4. Protocol
    1. 4.1. Refernces
  5. 5. whatsapp
    1. 5.1. Erlang