Django Web中的靜態文件之HTML5第1篇

從小程序出來以后，H5更是火上加油,大熱了一把。沒錯，小程序就是居于H5開發出來的。可惜咱們這次講的不是小程序，而是講HTML5，簡稱H5。

H5中的5，是版本號來的，它在HTML4的基礎上，進行了大大的優化。

1

H5去掉了HTML4上的雞肋標簽，如：<acronym>、<acronym>、<big>、

<basefont>、<center>、<dir>、<frame>、<frameset>、<noframes>等。新增了很多豐富的功能標簽。

以往需要借助第3方插件,如Flash ,才能實現的音頻和視頻功能，如今用HTML5<audio>、<video>標簽便可實現。

以上在Web上無法直接實現通訊的功能，如今用HTML5的WebSocket也可以實現了…

2

光說不練假把式，來點代碼試試，實現MP4的播放。視頻來源，自己隨便在網上找一個，建議找個短視頻，否則只顧欣賞影片，無心學習去了。

<!DOCTYPE html>

<html>

<body>

</video>

</body>

</html>

需要在應用程序中實現實時通信時，WebSocket是一個強大的協議，它可以在客戶端和服務器之間建立持久的雙向通信通道。本文將向您展示如何在Spring Boot應用程序中集成WebSocket，實現實時通信的功能。

介紹

WebSocket是一種網絡通信協議，能在單個TCP連接上進行全雙工通信。WebSocket通信協議于2011年被IETF定為標準RFC 6455，WebSocket API被W3C定為標準。WebSocket使得客戶端和服務器之間的數據交換變得更加簡單，允許服務端主動向客戶端推送數據。在WebSocket API中，瀏覽器和服務器只需要做一次握手，兩者之間就直接可以創建持久性連接并進行數據傳輸。

WebSocket原理

WebSocket是HTML5中的一個新特性。它實現了瀏覽器與服務器全雙工通信(full-duplex)。一開始，WebSocket只是瀏覽器和服務器之間的一個簡單的TCP連接。當連接建立后，服務器和瀏覽器都能主動向對方發送數據。

WebSocket連接的過程包括以下幾個步驟：

1.客戶端發送一個特殊的HTTP請求到服務器，這個請求中包含了一個“Upgrade: WebSocket”頭。

2.服務器發送一個101響應，告訴客戶端其正在切換到WebSocket協議。

3.一旦連接建立，客戶端和服務器就可以任意地發送和接收數據，而不需要像HTTP請求那樣，每次都需要對方的響應。

實現步驟

以下是在Spring Boot中集成WebSocket并實現實時通信的詳細步驟：

步驟1：創建Spring Boot項目

首先，創建一個Spring Boot項目。您可以使用Spring Initializr或手動創建項目。

步驟2：添加WebSocket依賴

在`pom.xml`文件中添加WebSocket依賴：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

步驟3：創建WebSocket配置類**

創建一個WebSocket配置類，用于配置WebSocket的端點和處理程序。

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

@Configuration
public class WebSocketConfig {
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}

步驟4：創建WebSocket處理程序

創建一個WebSocket處理程序，處理WebSocket連接和消息。

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

@ServerEndpoint("/websocket")
public class MyWebSocket {
    @OnOpen
    public void onOpen(Session session) {
        // 當客戶端連接時執行
    }

    @OnMessage
    public void onMessage(String message, Session session) {
        // 當接收到客戶端消息時執行
    }

    @OnClose
    public void onClose(Session session) {
        // 當客戶端斷開連接時執行
    }

    @OnError
    public void onError(Throwable error) {
        // 發生錯誤時執行
    }
}

步驟5：前端頁面

在前端頁面中，您可以使用JavaScript和WebSocket API來建立WebSocket連接，并發送和接收消息。

<!DOCTYPE html>
<html>
<head>
    <title>WebSocket Example</title>
</head>
<body>
    <script>
        var socket = new WebSocket("ws://localhost:8080/websocket");

        socket.onopen = function(event) {
            // 連接成功時執行
        };

        socket.onmessage = function(event) {
            var message = event.data;
            // 接收到消息時執行
        };

        socket.onclose = function(event) {
            // 連接關閉時執行
        };

        socket.onerror = function(error) {
            // 發生錯誤時執行
        };

        function sendMessage() {
            var message = document.getElementById("message").value;
            socket.send(message);
        }
    </script>

    <input type="text" id="message">
    <button onclick="sendMessage()">Send</button>
</body>
</html>

優點

使用WebSocket實現實時通信有以下優點：

1. 實時性：與傳統的HTTP請求-響應模式不同，WebSocket允許即時發送和接收數據，實現實時性。

2. 降低延遲：WebSocket連接保持打開狀態，無需為每個請求建立新的連接，可以減少通信的延遲。

3. 減少資源消耗：相比輪詢或長輪詢，WebSocket連接更高效，減少服務器資源消耗。

4. 雙向通信：WebSocket支持雙向通信，客戶端和服務器都可以主動發送消息。

適用場景

WebSocket是一種強大的協議，適用于許多實時通信和互動應用場景。以下是一些適用WebSocket的常見場景：

1. 即時聊天應用程序：WebSocket是構建即時聊天應用程序的理想選擇。它允許用戶實時發送和接收消息，支持私聊、群聊、在線狀態等功能。許多在線聊天應用程序如Slack、WhatsApp、Facebook Messenger等都使用WebSocket來實現實時通信。

2. 在線游戲：多人在線游戲(MMOG)通常需要實時的游戲狀態同步和玩家之間的實時互動。WebSocket可以用于在游戲客戶端和服務器之間實現實時通信，確保游戲體驗更加流暢和有趣。

3. 實時協作工具：協作工具和團隊合作平臺，如Google Docs、Microsoft Teams等，需要支持多人同時編輯和實時協作。WebSocket可用于同步用戶的編輯操作，確保協作工作在實時性方面表現出色。

4. 實時數據監控和通知：監控和控制系統需要實時獲取傳感器數據、日志信息或事件通知。WebSocket可以用于推送實時數據和事件通知，使操作員能夠及時采取行動。

5. 在線教育和遠程培訓：在線教育平臺需要實時互動，包括教師和學生之間的語音、視頻、文檔共享和實時提問。WebSocket可以提供良好的實時互動體驗。

6. 金融市場數據：金融市場需要實時傳輸股票價格、貨幣匯率等數據。WebSocket可用于向交易員提供實時數據更新，以便他們做出即時決策。

7. 社交媒體和新聞推送：社交媒體平臺和新聞網站可以使用WebSocket向用戶推送最新的帖子、評論、新聞和通知，使用戶保持更新。

8. 實時地理位置跟蹤：實時地理位置跟蹤應用程序，如共享單車、地圖導航、物流追蹤等，需要將實時位置信息傳輸給服務器并實時顯示給用戶。

總之，WebSocket適用于需要實時通信和互動的各種應用場景。它可以改善用戶體驗，提高應用程序的實時性，并支持多種實時功能。使用WebSocket，您可以構建更加動態和交互性的Web應用程序。

總結

WebSocket是一種強大的協議，可以實現實時通信，適用于多種應用場景。通過Spring Boot的支持，您可以輕松集成WebSocket，并在應用程序中實現實時通信功能。WebSocket的優點包括實時性、降低延遲、減少資源消耗和雙向通信。希望本文對您理解Spring Boot集成WebSocket和實時通信有所幫助，為您的應用程序增加更多交互和實時性。開始使用WebSocket，讓您的應用程序更加互動！

ebSocket 和 Socket 的區別就像Java和JavaScript，并沒有什么太大的關系，但又不能說完全沒關系。可以這么說：

命名方面，Socket是一個深入人心的概念，WebSocket借用了這一概念；
使用方面，完全兩個東西。

Java和JavaScript的關系

當我們探討兩件事物的區別和聯系時，我們想探討些什么？

對這個問題最直接的解決方法應該是去了解Socket和WebSocket的來源和用法，那么它們的區別和聯系就不言自明了。

Socket

Socket可以有很多意思，和IT較相關的本意大致是指在端到端的一個連接中，這兩個端叫做Socket。對于IT從業者來說，它往往指的是TCP/IP網絡環境中的兩個連接端，大多數的API提供者（如操作系統，JDK）往往會提供基于這種概念的接口，所以對于開發者來說也往往是在說一種編程概念。同時，操作系統中進程間通信也有Socket的概念，但這個Socket就不是基于網絡傳輸層的協議了。

Unix 中的 Socket

操作系統中也有使用到Socket這個概念用來進行進程間通信，它和通常說的基于TCP/IP的Socket概念十分相似，代表了在操作系統中傳輸數據的兩方，只是它不再基于網絡協議，而是操作系統本身的文件系統。

網絡中的 Socket

通常所說的Socket API，是指操作系統中（也可能不是操作系統）提供的對于傳輸層（TCP/UDP）抽象的接口。現行的Socket API大致都是遵循了BSD Socket規范（包括Windows）。這里稱規范其實不太準確，規范其實是POSIX，但BSD Unix中對于Socket的實現被廣為使用，所以成為了實際的規范。如果你要使用HTTP來構建服務，那么就不需要關心Socket，如果你想基于TCP/IP來構建服務，那么Socket可能就是你會接觸到的API。

在TCP/IP網絡中HTTP的位置

從上圖中可以看到，HTTP是基于傳輸層的TCP協議的，而Socket API也是，所以只是從使用上說，可以認為Socket和HTTP類似（但一個是成文的互聯網協議，一個是一直沿用的一種編程概念），是對于傳輸層協議的另一種直接使用，因為按照設計，網絡對用戶的接口都應該在應用層。

Socket 名稱的由來

和很多其他Internet上的事物一樣，Socket這個名稱來自于大名鼎鼎的ARPANET（Advanced Research Projects Agency），早期ARPANET中的Socket指的是一個源或者目的地址——大致就是今天我們所說的IP地址和端口號。最早的時候一個Socket指的是一個40位的數字（RFC33中說明了此用法，但在RFC36中并沒有明確地說使用40位數字來標識一個地址），其中前32為指向的地址（socket number，大致相當于IP），后8位為發送數據的源（link，大致相當于端口號）。對他們的叫法有很多的版本，這里列舉的并不嚴謹。

領取C++音視頻開發學習資料：點擊→音視頻開發（資料文檔+視頻教程+面試題）（FFmpeg+WebRTC+RTMP+RTSP+HLS+RTP）

端口號的野史

隨著ARPANET的發展，后來（RFC433，Socket Number List）socket number被明確地定義為一個40位的數字，其中后8位被用來制定某個特定的應用使用（比如1是Telnet）。這8位數有很多名字：link、socket name、AEN（another eight number，看到這個名字我也是醉了），工程師逗逼起來也是挺拼的。

后來在Internet的規范制定中，才真正的用起了port number這個詞。至于為什么端口號是16位的，我想可能有兩個原因，一是對于當時的工程師來說，如果每個端口號來標識一個程序，65535個端口號也差不多夠用了。二可能是為了對齊吧，^_^!!。

Socket 原本的意思

在上邊提到的歷史中使用到的Socket，包括TCP文檔中使用到的Socket，其實指的是網絡傳輸中的一端，是一個虛擬化的概念。

WebSocket

上邊簡單敘述了Socket的意義，由于年代久遠，很多事情也搞不了那么清楚。但WebSocket是一個很晚近的東西，可以讓我們看到它是如何成為現在我們看到的這個樣子的。

WHATWG(Web Hypertext Application Technology Working Group)

關于HTML5的故事很多人都是知道的，w3c放棄了HTML，然后有一群人（也有說是這些人供職的公司，不過官方的文檔上是說的個人）創立了WHATWG組織來推動HTML語言的繼續發展，同時，他們還發展了很多關于Web的技術標準，這些標準不斷地被官方所接受。WebSocket就屬于WHATWG發布的Web Application的一部分（即HTML5）的產物。

為什么會有 WebSocket

大約在08年的時候，WG的工程師在討論網絡環境中需要一種全雙工的連接形式，剛開始一直叫做「TCPConnection」，并討論了這種協議需要支持的功能，大致已經和我們今天看到的WebSocket差不多了。他們認為基于現有的HTTP之上的一些技術（如長輪詢、Comet）并滿足不了這種需求，有必要定義一個全新的協議。

名稱的由來

在很多的關于HTML5或者WebSocket的文檔中，都能看到一個名字，Hixie（Ian Hickson），他是WHATWG組織的發言人，曾供職于Netscape、Opera、Google，看工作的公司就知道這個人的背景了。

08年6月18日，一群WHATWG的工程師在討論一些技術問題，一個工程師提到說「我們之前討論的那個東西，不要叫TCPConnection 了，還是起個別的名字吧」，接著幾個名字被提及，DuplexConnection，TCPSocket，SocketConnection ，一個叫mcarter（Michael Carter ）的工程師說他馬上要寫一篇關于Comet的文章，如果可以確定這個名稱，想在文章中引用這個名字。

Socket一直以來都被人用來表示網絡中一個連接的兩端，考慮到怎么讓工程師更容易接受，后來Hixie說了一句「我看WebSocket這個名字就很適合嘛（Hixie briefly pops back online to record that “WebSocket” would probably be a good new name for the TCPConnection object）」，大家都沒有異議，緊接著mcarter在Comet Daily中發表了文章Independence Day: HTML5 WebSocket Liberates Comet From Hacks，后來隨著各大瀏覽器對WebSocket的支持，它變成了實際的標準，IETF也沿用了這個名字。

下邊是在WHATWG文檔中對WebSocket接口的定義

    enum BinaryType { "blob", "arraybuffer" };

    [Constructor(USVString url, optional (DOMString or sequence<DOMString>) protocols = []), Exposed=(Window,Worker)]

    interface WebSocket : EventTarget {

      readonly attribute USVString url;

     

      // ready state

      const unsigned short CONNECTING = 0;

      const unsigned short OPEN = 1;

      const unsigned short CLOSING = 2;

      const unsigned short CLOSED = 3;

      readonly attribute unsigned short readyState;

      readonly attribute unsigned long long bufferedAmount;

     

      // networking

      attribute EventHandler onopen;

      attribute EventHandler onerror;

      attribute EventHandler onclose;

      readonly attribute DOMString extensions;

      readonly attribute DOMString protocol;

      void close([Clamp] optional unsigned short code, optional USVString reason);

     

      // messaging

      attribute EventHandler onmessage;

      attribute BinaryType binaryType;

      void send(USVString data);

      void send(Blob data);

      void send(ArrayBuffer data);

      void send(ArrayBufferView data);

    };

內容的確定

大多數新技術的出現都是建立在已有技術的鋪墊之上的，WebSocket內容的確定也是如此，其中就有Comet看不到的貢獻，Comet是一個很有趣的技術，有興趣可以看看這里

結論

可以把WebSocket想象成HTTP，HTTP和Socket什么關系，WebSocket和Socket就是什么關系。

在線咨詢

上一篇：打開網站就彈出網站公告提示框的JS彈窗代碼
下一篇：JavaScript簡單版發布留言怎么做？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商