整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
從小程序出來以后，H5更是火上加油,大熱了一把。沒錯，小程序就是居于H5開發(fā)出來的。可惜咱們這次講的不是小程序，而是講HTML5，簡稱H5。
H5中的5，是版本號來的，它在HTML4的基礎(chǔ)上，進(jìn)行了大大的優(yōu)化。
H5去掉了HTML4上的雞肋標(biāo)簽，如：<acronym>、<acronym>、<big>、
<basefont>、<center>、<dir>、<frame>、<frameset>、<noframes>等。新增了很多豐富的功能標(biāo)簽。
以往需要借助第3方插件,如Flash ,才能實(shí)現(xiàn)的音頻和視頻功能，如今用HTML5<audio>、<video>標(biāo)簽便可實(shí)現(xiàn)。
以上在Web上無法直接實(shí)現(xiàn)通訊的功能，如今用HTML5的WebSocket也可以實(shí)現(xiàn)了…
光說不練假把式，來點(diǎn)代碼試試，實(shí)現(xiàn)MP4的播放。視頻來源，自己隨便在網(wǎng)上找一個，建議找個短視頻，否則只顧欣賞影片，無心學(xué)習(xí)去了。
<!DOCTYPE html>
<html>
<body>
<video width="420" controls>
<source src=" " type="video/mp4" />
</video>
</body>
</html>
需要在應(yīng)用程序中實(shí)現(xiàn)實(shí)時通信時，WebSocket是一個強(qiáng)大的協(xié)議，它可以在客戶端和服務(wù)器之間建立持久的雙向通信通道。本文將向您展示如何在Spring Boot應(yīng)用程序中集成WebSocket，實(shí)現(xiàn)實(shí)時通信的功能。
WebSocket是一種網(wǎng)絡(luò)通信協(xié)議，能在單個TCP連接上進(jìn)行全雙工通信。WebSocket通信協(xié)議于2011年被IETF定為標(biāo)準(zhǔn)RFC 6455，WebSocket API被W3C定為標(biāo)準(zhǔn)。WebSocket使得客戶端和服務(wù)器之間的數(shù)據(jù)交換變得更加簡單，允許服務(wù)端主動向客戶端推送數(shù)據(jù)。在WebSocket API中，瀏覽器和服務(wù)器只需要做一次握手，兩者之間就直接可以創(chuàng)建持久性連接并進(jìn)行數(shù)據(jù)傳輸。
WebSocket是HTML5中的一個新特性。它實(shí)現(xiàn)了瀏覽器與服務(wù)器全雙工通信(full-duplex)。一開始，WebSocket只是瀏覽器和服務(wù)器之間的一個簡單的TCP連接。當(dāng)連接建立后，服務(wù)器和瀏覽器都能主動向?qū)Ψ桨l(fā)送數(shù)據(jù)。
WebSocket連接的過程包括以下幾個步驟：
1.客戶端發(fā)送一個特殊的HTTP請求到服務(wù)器，這個請求中包含了一個“Upgrade: WebSocket”頭。
2.服務(wù)器發(fā)送一個101響應(yīng)，告訴客戶端其正在切換到WebSocket協(xié)議。
3.一旦連接建立，客戶端和服務(wù)器就可以任意地發(fā)送和接收數(shù)據(jù)，而不需要像HTTP請求那樣，每次都需要對方的響應(yīng)。
以下是在Spring Boot中集成WebSocket并實(shí)現(xiàn)實(shí)時通信的詳細(xì)步驟：
步驟1：創(chuàng)建Spring Boot項目
首先，創(chuàng)建一個Spring Boot項目。您可以使用Spring Initializr或手動創(chuàng)建項目。
步驟2：添加WebSocket依賴
在`pom.xml`文件中添加WebSocket依賴：
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>步驟3：創(chuàng)建WebSocket配置類**
創(chuàng)建一個WebSocket配置類，用于配置WebSocket的端點(diǎn)和處理程序。
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：創(chuàng)建WebSocket處理程序
創(chuàng)建一個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) {
// 當(dāng)客戶端連接時執(zhí)行
}
@OnMessage
public void onMessage(String message, Session session) {
// 當(dāng)接收到客戶端消息時執(zhí)行
}
@OnClose
public void onClose(Session session) {
// 當(dāng)客戶端斷開連接時執(zhí)行
}
@OnError
public void onError(Throwable error) {
// 發(fā)生錯誤時執(zhí)行
}
}步驟5：前端頁面
在前端頁面中，您可以使用JavaScript和WebSocket API來建立WebSocket連接，并發(fā)送和接收消息。
<!DOCTYPE html>
<html>
<head>
<title>WebSocket Example</title>
</head>
<body>
<script>
var socket = new WebSocket("ws://localhost:8080/websocket");
socket.onopen = function(event) {
// 連接成功時執(zhí)行
};
socket.onmessage = function(event) {
var message = event.data;
// 接收到消息時執(zhí)行
};
socket.onclose = function(event) {
// 連接關(guān)閉時執(zhí)行
};
socket.onerror = function(error) {
// 發(fā)生錯誤時執(zhí)行
};
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實(shí)現(xiàn)實(shí)時通信有以下優(yōu)點(diǎn)：
1. 實(shí)時性：與傳統(tǒng)的HTTP請求-響應(yīng)模式不同，WebSocket允許即時發(fā)送和接收數(shù)據(jù)，實(shí)現(xiàn)實(shí)時性。
2. 降低延遲：WebSocket連接保持打開狀態(tài)，無需為每個請求建立新的連接，可以減少通信的延遲。
3. 減少資源消耗：相比輪詢或長輪詢，WebSocket連接更高效，減少服務(wù)器資源消耗。
4. 雙向通信：WebSocket支持雙向通信，客戶端和服務(wù)器都可以主動發(fā)送消息。
WebSocket是一種強(qiáng)大的協(xié)議，適用于許多實(shí)時通信和互動應(yīng)用場景。以下是一些適用WebSocket的常見場景：
1. 即時聊天應(yīng)用程序：WebSocket是構(gòu)建即時聊天應(yīng)用程序的理想選擇。它允許用戶實(shí)時發(fā)送和接收消息，支持私聊、群聊、在線狀態(tài)等功能。許多在線聊天應(yīng)用程序如Slack、WhatsApp、Facebook Messenger等都使用WebSocket來實(shí)現(xiàn)實(shí)時通信。
2. 在線游戲：多人在線游戲(MMOG)通常需要實(shí)時的游戲狀態(tài)同步和玩家之間的實(shí)時互動。WebSocket可以用于在游戲客戶端和服務(wù)器之間實(shí)現(xiàn)實(shí)時通信，確保游戲體驗更加流暢和有趣。
3. 實(shí)時協(xié)作工具：協(xié)作工具和團(tuán)隊合作平臺，如Google Docs、Microsoft Teams等，需要支持多人同時編輯和實(shí)時協(xié)作。WebSocket可用于同步用戶的編輯操作，確保協(xié)作工作在實(shí)時性方面表現(xiàn)出色。
4. 實(shí)時數(shù)據(jù)監(jiān)控和通知：監(jiān)控和控制系統(tǒng)需要實(shí)時獲取傳感器數(shù)據(jù)、日志信息或事件通知。WebSocket可以用于推送實(shí)時數(shù)據(jù)和事件通知，使操作員能夠及時采取行動。
5. 在線教育和遠(yuǎn)程培訓(xùn)：在線教育平臺需要實(shí)時互動，包括教師和學(xué)生之間的語音、視頻、文檔共享和實(shí)時提問。WebSocket可以提供良好的實(shí)時互動體驗。
6. 金融市場數(shù)據(jù)：金融市場需要實(shí)時傳輸股票價格、貨幣匯率等數(shù)據(jù)。WebSocket可用于向交易員提供實(shí)時數(shù)據(jù)更新，以便他們做出即時決策。
7. 社交媒體和新聞推送：社交媒體平臺和新聞網(wǎng)站可以使用WebSocket向用戶推送最新的帖子、評論、新聞和通知，使用戶保持更新。
8. 實(shí)時地理位置跟蹤：實(shí)時地理位置跟蹤應(yīng)用程序，如共享單車、地圖導(dǎo)航、物流追蹤等，需要將實(shí)時位置信息傳輸給服務(wù)器并實(shí)時顯示給用戶。
總之，WebSocket適用于需要實(shí)時通信和互動的各種應(yīng)用場景。它可以改善用戶體驗，提高應(yīng)用程序的實(shí)時性，并支持多種實(shí)時功能。使用WebSocket，您可以構(gòu)建更加動態(tài)和交互性的Web應(yīng)用程序。
WebSocket是一種強(qiáng)大的協(xié)議，可以實(shí)現(xiàn)實(shí)時通信，適用于多種應(yīng)用場景。通過Spring Boot的支持，您可以輕松集成WebSocket，并在應(yīng)用程序中實(shí)現(xiàn)實(shí)時通信功能。WebSocket的優(yōu)點(diǎn)包括實(shí)時性、降低延遲、減少資源消耗和雙向通信。希望本文對您理解Spring Boot集成WebSocket和實(shí)時通信有所幫助，為您的應(yīng)用程序增加更多交互和實(shí)時性。開始使用WebSocket，讓您的應(yīng)用程序更加互動！
ebSocket 和 Socket 的區(qū)別就像Java和JavaScript，并沒有什么太大的關(guān)系，但又不能說完全沒關(guān)系。可以這么說：
Java和JavaScript的關(guān)系
當(dāng)我們探討兩件事物的區(qū)別和聯(lián)系時，我們想探討些什么？
對這個問題最直接的解決方法應(yīng)該是去了解Socket和WebSocket的來源和用法，那么它們的區(qū)別和聯(lián)系就不言自明了。
Socket可以有很多意思，和IT較相關(guān)的本意大致是指在端到端的一個連接中，這兩個端叫做Socket。對于IT從業(yè)者來說，它往往指的是TCP/IP網(wǎng)絡(luò)環(huán)境中的兩個連接端，大多數(shù)的API提供者（如操作系統(tǒng)，JDK）往往會提供基于這種概念的接口，所以對于開發(fā)者來說也往往是在說一種編程概念。同時，操作系統(tǒng)中進(jìn)程間通信也有Socket的概念，但這個Socket就不是基于網(wǎng)絡(luò)傳輸層的協(xié)議了。
操作系統(tǒng)中也有使用到Socket這個概念用來進(jìn)行進(jìn)程間通信，它和通常說的基于TCP/IP的Socket概念十分相似，代表了在操作系統(tǒng)中傳輸數(shù)據(jù)的兩方，只是它不再基于網(wǎng)絡(luò)協(xié)議，而是操作系統(tǒng)本身的文件系統(tǒng)。
通常所說的Socket API，是指操作系統(tǒng)中（也可能不是操作系統(tǒng)）提供的對于傳輸層（TCP/UDP）抽象的接口。現(xiàn)行的Socket API大致都是遵循了BSD Socket規(guī)范（包括Windows）。這里稱規(guī)范其實(shí)不太準(zhǔn)確，規(guī)范其實(shí)是POSIX，但BSD Unix中對于Socket的實(shí)現(xiàn)被廣為使用，所以成為了實(shí)際的規(guī)范。如果你要使用HTTP來構(gòu)建服務(wù)，那么就不需要關(guān)心Socket，如果你想基于TCP/IP來構(gòu)建服務(wù)，那么Socket可能就是你會接觸到的API。
在TCP/IP網(wǎng)絡(luò)中HTTP的位置
從上圖中可以看到，HTTP是基于傳輸層的TCP協(xié)議的，而Socket API也是，所以只是從使用上說，可以認(rèn)為Socket和HTTP類似（但一個是成文的互聯(lián)網(wǎng)協(xié)議，一個是一直沿用的一種編程概念），是對于傳輸層協(xié)議的另一種直接使用，因為按照設(shè)計，網(wǎng)絡(luò)對用戶的接口都應(yīng)該在應(yīng)用層。
和很多其他Internet上的事物一樣，Socket這個名稱來自于大名鼎鼎的ARPANET（Advanced Research Projects Agency），早期ARPANET中的Socket指的是一個源或者目的地址——大致就是今天我們所說的IP地址和端口號。最早的時候一個Socket指的是一個40位的數(shù)字（RFC33中說明了此用法，但在RFC36中并沒有明確地說使用40位數(shù)字來標(biāo)識一個地址），其中前32為指向的地址（socket number，大致相當(dāng)于IP），后8位為發(fā)送數(shù)據(jù)的源（link，大致相當(dāng)于端口號）。對他們的叫法有很多的版本，這里列舉的并不嚴(yán)謹(jǐn)。
領(lǐng)取C++音視頻開發(fā)學(xué)習(xí)資料：點(diǎn)擊→音視頻開發(fā)（資料文檔+視頻教程+面試題）（FFmpeg+WebRTC+RTMP+RTSP+HLS+RTP）
隨著ARPANET的發(fā)展，后來（RFC433，Socket Number List）socket number被明確地定義為一個40位的數(shù)字，其中后8位被用來制定某個特定的應(yīng)用使用（比如1是Telnet）。這8位數(shù)有很多名字：link、socket name、AEN（another eight number，看到這個名字我也是醉了），工程師逗逼起來也是挺拼的。
后來在Internet的規(guī)范制定中，才真正的用起了port number這個詞。至于為什么端口號是16位的，我想可能有兩個原因，一是對于當(dāng)時的工程師來說，如果每個端口號來標(biāo)識一個程序，65535個端口號也差不多夠用了。二可能是為了對齊吧，^_^!!。
在上邊提到的歷史中使用到的Socket，包括TCP文檔中使用到的Socket，其實(shí)指的是網(wǎng)絡(luò)傳輸中的一端，是一個虛擬化的概念。
上邊簡單敘述了Socket的意義，由于年代久遠(yuǎn)，很多事情也搞不了那么清楚。但WebSocket是一個很晚近的東西，可以讓我們看到它是如何成為現(xiàn)在我們看到的這個樣子的。
關(guān)于HTML5的故事很多人都是知道的，w3c放棄了HTML，然后有一群人（也有說是這些人供職的公司，不過官方的文檔上是說的個人）創(chuàng)立了WHATWG組織來推動HTML語言的繼續(xù)發(fā)展，同時，他們還發(fā)展了很多關(guān)于Web的技術(shù)標(biāo)準(zhǔn)，這些標(biāo)準(zhǔn)不斷地被官方所接受。WebSocket就屬于WHATWG發(fā)布的Web Application的一部分（即HTML5）的產(chǎn)物。
大約在08年的時候，WG的工程師在討論網(wǎng)絡(luò)環(huán)境中需要一種全雙工的連接形式，剛開始一直叫做「TCPConnection」，并討論了這種協(xié)議需要支持的功能，大致已經(jīng)和我們今天看到的WebSocket差不多了。他們認(rèn)為基于現(xiàn)有的HTTP之上的一些技術(shù)（如長輪詢、Comet）并滿足不了這種需求，有必要定義一個全新的協(xié)議。
在很多的關(guān)于HTML5或者WebSocket的文檔中，都能看到一個名字，Hixie（Ian Hickson），他是WHATWG組織的發(fā)言人，曾供職于Netscape、Opera、Google，看工作的公司就知道這個人的背景了。
08年6月18日，一群WHATWG的工程師在討論一些技術(shù)問題，一個工程師提到說「我們之前討論的那個東西，不要叫TCPConnection 了，還是起個別的名字吧 」，接著幾個名字被提及，DuplexConnection，TCPSocket，SocketConnection ，一個叫mcarter（Michael Carter ）的工程師說他馬上要寫一篇關(guān)于Comet的文章，如果可以確定這個名稱，想在文章中引用這個名字。
Socket一直以來都被人用來表示網(wǎng)絡(luò)中一個連接的兩端，考慮到怎么讓工程師更容易接受，后來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中發(fā)表了文章Independence Day: HTML5 WebSocket Liberates Comet From Hacks，后來隨著各大瀏覽器對WebSocket的支持，它變成了實(shí)際的標(biāo)準(zhǔn)，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);
};大多數(shù)新技術(shù)的出現(xiàn)都是建立在已有技術(shù)的鋪墊之上的，WebSocket內(nèi)容的確定也是如此，其中就有Comet看不到的貢獻(xiàn)，Comet是一個很有趣的技術(shù)，有興趣可以看看這里
可以把WebSocket想象成HTTP，HTTP和Socket什么關(guān)系，WebSocket和Socket就是什么關(guān)系。
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
