WebSocket 介紹及使用

時間 2020-02-12

標籤 websocket 介紹使用简体版

原文原文鏈接

今天帶來的是webSocket技術。若有不足，敬請指正。。百度百科中這樣解釋：javascript

1、WebSocket背景

如今，不少網站爲了實現推送技術，所用的技術都是輪詢。輪詢是在特定的的時間間隔（如每1秒），由瀏覽器對服務器發出HTTP請求，而後由服務器返回最新的數據給客戶端的瀏覽器。這種傳統的模式帶來很明顯的缺點，即瀏覽器須要不斷的向服務器發出請求，然而HTTP請求可能包含較長的頭部，其中真正有效的數據可能只是很小的一部分，顯然這樣會浪費不少的帶寬等資源。html

而比較新的技術去作輪詢的效果是Comet。這種技術雖然能夠雙向通訊，但依然須要反覆發出請求。並且在Comet中，廣泛採用的長連接，也會消耗服務器資源。前端

在這種狀況下，HTML5定義了WebSocket協議，能更好的節省服務器資源和帶寬，而且可以更實時地進行通信。java

2、使用WebSocket的優勢

較少的控制開銷。在鏈接建立後，服務器和客戶端之間交換數據時，用於協議控制的數據包頭部相對較小。在不包含擴展的狀況下，對於服務器到客戶端的內容，此頭部大小隻有2至10字節（和數據包長度有關）；對於客戶端到服務器的內容，此頭部還須要加上額外的4字節的掩碼。相對於HTTP請求每次都要攜帶完整的頭部，此項開銷顯著減小了。
更強的實時性。因爲協議是全雙工的，因此服務器能夠隨時主動給客戶端下發數據。相對於HTTP請求須要等待客戶端發起請求服務端才能響應，延遲明顯更少；即便是和Comet等相似的長輪詢比較，其也能在短期內更屢次地傳遞數據。
保持鏈接狀態。與HTTP不一樣的是，Websocket須要先建立鏈接，這就使得其成爲一種有狀態的協議，以後通訊時能夠省略部分狀態信息。而HTTP請求可能須要在每一個請求都攜帶狀態信息（如身份認證等）。
更好的二進制支持。Websocket定義了二進制幀，相對HTTP，能夠更輕鬆地處理二進制內容。
能夠支持擴展。Websocket定義了擴展，用戶能夠擴展協議、實現部分自定義的子協議。如部分瀏覽器支持壓縮等。
更好的壓縮效果。相對於HTTP壓縮，Websocket在適當的擴展支持下，能夠沿用以前內容的上下文，在傳遞相似的數據時，能夠顯著地提升壓縮率。

3、握手協議

WebSocket 是獨立的、建立在 TCP 上的協議。
Websocket 經過HTTP/1.1 協議的101狀態碼進行握手。
爲了建立Websocket鏈接，須要經過瀏覽器發出請求，以後服務器進行迴應，這個過程一般稱爲「握手」（handshaking）。

4、API 簡介

4.1 ServerApplicationConfig

項目啓動時會自動啓動，相似與ContextListener，是WebSocket的核心配置。其有兩個方法：web

getEndPointConfigs獲取全部以接口方式配置的webSocket類
getAnnotatedEndpointClasses 掃描src下的全部類（@ServerEndPoint註解的類）

注：EndPoint就指的是一個webSocket的一個服務端程序。編程

5、實現瀏覽器到服務器的交互

5.1 項目結構以下

項目結構

5.2 DemoConfiig

package com.rrs.config;

import java.util.Set;

import javax.websocket.Endpoint;
import javax.websocket.server.ServerApplicationConfig;
import javax.websocket.server.ServerEndpointConfig;

/**
 * @author lzx
 *
 */
public class DemoConfig implements ServerApplicationConfig {

	// 註解式方式編程
	@Override
	public Set<Class<?>> getAnnotatedEndpointClasses(Set<Class<?>> scan) {
		System.out.println("webSocket:" + scan.size());

		// 服務端掃描到服務返回，能夠起到過濾做用
		return scan;
	}

	// 接口式方式編程
	@Override
	public Set<ServerEndpointConfig> getEndpointConfigs(Set<Class<? extends Endpoint>> endpointClasses) {
		// TODO Auto-generated method stub
		return null;
	}

}

5.3 EchoSocket

package com.rrs.socket;

import java.io.IOException;

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

//多例模式
/**
 * @author lzx
 *
 */
@ServerEndpoint("/echo")
public class EchoSocket {

	@OnOpen // 只要訪問此路徑此方法就會執行
	public void open(Session session) {
		// 一個session 表明一個會話（管道）
		System.out.println("sessionId:" + session.getId() + "開啓...");
	}

	@OnMessage
	public void getMessage(Session session, String msg) {

		System.out.println("來自客戶端的消息：" + msg);

		// 服務器發送消息
		try {
			session.getBasicRemote().sendText("服務器發送消息：Hello客戶端  ");
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}

	// 會話關閉的時候調用
	@OnClose
	public void close(Session session) {

		System.out.println("sessionId：" + session.getId() + "關閉...");
	}

}

5.4 index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>webScoket</title>
</head>
<body>

	<button onclick=subOpen();>send</button>
	<br>
	<input type="text" id="message" />
	<button onclick=subSend();>send2</button>

	<div id="sp"></div>

	<script type="text/javascript">
		
		var ws;//一個ws對象就是一個通訊管道
		
		var target = "ws://localhost:8080/websocketproject/echo";
		function subOpen(){
			if ('WebSocket' in window) {
				ws = new WebSocket(target);
			} else if ('MozWebSocket' in window) {
				ws = new MozWebSocket(target);
			} else {
				alert('WebSocket is not supported by this browser.');
				return;
			}
		}
		
		function subSend(){
			if (ws != null) {
                var message = document.getElementById('message').value;
                ws.send(message);
                
			document.getElementById('message').value=""
			  
			// 經過事件
			ws.onmessage = function(event){
				var sp = document.getElementById("sp");
				sp.innerHTML+=event.data;
			}
            } else {
                alert('WebSocket connection not established, please connect.');
            }
		}
		
	</script>
</body>
</html>