1. 程式人生 > >使用WebSocket與伺服器進行通訊

使用WebSocket與伺服器進行通訊

WebSocket介面

按照傳統的HTTP協議,如果瀏覽器不向Web伺服器發起請求,那麼Web伺服器就不能把資料“推送”給瀏覽器。在這樣的技術背景下,如果需要構建實時性要求比較高的應用,比如線上遊戲,線上證券,裝置監控,新聞線上播報等,當客戶端瀏覽器呈現這些資訊的時候,伺服器端的資料已經更新了。

為了讓客戶端與服務端的資訊同步是實時的,常用的解決方法有兩種。

定義傳送請求:瀏覽器以固定頻率向服務端發起請求,以頻繁請求的方式來保持客戶端與伺服器端的同步。這種方案存在的弊端就是如果伺服器資料沒有更新,會造成多餘的網路傳輸,浪費伺服器資源,這是一種效率很低的方案。

隱藏的連線:在瀏覽器頁面上使用一個隱藏的視窗與伺服器端建立長連線,伺服器通過這個長連線把資料推送給瀏覽器端。這種機制需要對不同的瀏覽器設計不同的方案,而且這種機制在併發量比較大的情況下,會加重伺服器負擔。

WebSocket改變了這種現狀,WenSocket允許通過JavaScript建立與遠端伺服器的連線,從而允許遠端伺服器將資料推送給瀏覽器。

WebSeocke中的方法:

send(): 向遠端伺服器傳送資料。

close():關閉WebSocket。

WebSocket中定義的監聽事件。

onopen: 當WebSocket建立網路連線時觸發該事件。

onerror: 當網路連接出現錯誤時觸發該事件。

onclose: 當WebSocket被關閉時觸發該事件。

onmessage: 當WebSocket接收到遠端伺服器的資料時觸發該事件。

WebSocket中蒂尼個readyState屬性值

CONNECTING: 0 WebSocket正在嘗試與伺服器建立連線

OPEN: 1  WebSocket與伺服器已建立連線

CLOSING: 2 WebSocket正在關閉與伺服器的連線。

CLOSED: 3  WebSocket已經關閉了與伺服器的連線。

WebSocket與遠端伺服器通訊的步驟:

1.呼叫WebSocket的Constructor(DOMString url,[DOMString protocols])建立一個WebSocket物件。

2.如果要傳送訊息,則呼叫WebSocket的send()方法傳送訊息。

3.如果要接收訊息,則為WebSocket的onmessage()方法繫結監聽事件。

使用WebSocket進行通訊的例項

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>使用WebSocket進行通訊</title>
		
	</head>
	
	<body>
		<script type="text/javascript">
			// 建立Web Socket物件
			var webSocket = new WebSocket("ws://127.0.0.1:30000");
			// 當WebSocket建立網路連線時激發該函式
			webSocket.onopen= function()
			{
				alert("已開啟連線");
				// 傳送訊息
				webSocket.send("我是瘋狂軟體教育中心");
			}
			// 為onmessage事件繫結監聽器,接收訊息
			webSocket.onmessage= function(event)
			{
				// 接收訊息
				alert("收到的訊息是:" + event.data);
			}
		</script>
		
		
	</body>
</html>s
伺服器程式碼:
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.net.ServerSocket;
import java.net.Socket;
import java.nio.charset.Charset;
import java.security.MessageDigest;
import java.util.regex.Matcher;
import java.util.regex.Pattern;

import sun.misc.BASE64Encoder;


public class SimpleServer
{
	public SimpleServer()throws Exception
	{
		// 建立ServerSocket,準備接受客戶端連線
		ServerSocket ss = new ServerSocket(30000);
		// 接收到客戶端連線
		Socket socket = ss.accept();
		// 得到Socket對應的輸入流
		InputStream in = socket.getInputStream();
		// 得到Socket對應的輸出流
		OutputStream out = socket.getOutputStream();
		byte[] buff = new byte[1024];
		int count = -1;
		String req = "";
		// 讀取資料,此時建立與WebSocket的"握手"。
		count = in.read(buff);
		// 將讀取的資料轉化為字串
		req = new String(buff , 0 , count);
		System.out.println("握手請求:" + req);
		// 獲取WebSocket的key
		String secKey = getSecWebSocketKey(req);
		System.out.println("secKey = " + secKey);
		String response = "HTTP/1.1 101 Switching Protocols\r\nUpgrade: "
			+ "websocket\r\nConnection: Upgrade\r\nSec-WebSocket-Accept: "
				+ getSecWebSocketAccept(secKey) + "\r\n\r\n";
		System.out.println("secAccept = " + getSecWebSocketAccept(secKey));
		out.write(response.getBytes());
		// 再次讀取WebSocket傳送過來的資料
		count = in.read(buff);
		System.out.println("接收的位元組數:" + count);
		/*
			因為WebSocket傳送過來的資料遵循了一定的協議格式,
			其中第3個~第6個位元組是資料掩碼。
			從第7個位元組開始才是真正的有效資料。
			因此程式使用第3個~第6個位元組對後面的資料進行了處理
		*/
		for (int i = 0 ; i < count - 6 ; i++ )
		{
			buff[i + 6] = (byte) (buff[i % 4 + 2] ^ buff[i + 6]);
		}
		// 顯示讀取得到的資料
		System.out.println("接收的內容:" +  new String(buff
			, 6 , count - 6 , "UTF-8"));
		// 傳送資料時,第一個位元組必須與讀到的第一個位元組相同
		byte[] pushHead = new byte[2];
		pushHead[0] = buff[0];
		String pushMsg = "收到,收到!歡迎加入WebSocket世界!";
		// 傳送資料時,第二個位元組記錄傳送資料的長度
		pushHead[1] = (byte) pushMsg.getBytes("UTF-8").length;
		// 傳送前兩個位元組
		out.write(pushHead);
		// 傳送有效資料
		out.write(pushMsg.getBytes("UTF-8"));
		// 關閉Socket
		socket.close();
		// 關閉ServerSocket
		ss.close();
	}
	// 獲取WebSocket請求的SecKey
	private String getSecWebSocketKey(String req)
	{
		//構建正則表示式,獲取Sec-WebSocket-Key: 後面的內容
		Pattern p = Pattern.compile("^(Sec-WebSocket-Key:).+",
				Pattern.CASE_INSENSITIVE | Pattern.MULTILINE);
		Matcher m = p.matcher(req);
		if (m.find())
		{
			// 提取Sec-WebSocket-Key
			String foundstring = m.group();
			return foundstring.split(":")[1].trim();
		}
		else
		{
			return null;
		}
	}
	// 根據WebSocket請求的SecKey計算SecAccept
	private String getSecWebSocketAccept(String key)
		throws Exception
	{
		String guid = "258EAFA5-E914-47DA-95CA-C5AB0DC85B11";
		key += guid;
		MessageDigest md = MessageDigest.getInstance("SHA-1");
		md.update(key.getBytes("ISO-8859-1") , 0 , key.length());
		byte[] sha1Hash = md.digest();
		BASE64Encoder encoder = new BASE64Encoder();
		return encoder.encode(sha1Hash);
	}
	public static void main(String[] args)
		throws Exception
	{
		new SimpleServer();
	}
}
結果如圖: