【移動應(yīng)用開發(fā)技術(shù)】SpringBoot怎么使用WebSocket實(shí)現(xiàn)群發(fā)消息_第1頁
【移動應(yīng)用開發(fā)技術(shù)】SpringBoot怎么使用WebSocket實(shí)現(xiàn)群發(fā)消息_第2頁
【移動應(yīng)用開發(fā)技術(shù)】SpringBoot怎么使用WebSocket實(shí)現(xiàn)群發(fā)消息_第3頁
【移動應(yīng)用開發(fā)技術(shù)】SpringBoot怎么使用WebSocket實(shí)現(xiàn)群發(fā)消息_第4頁
【移動應(yīng)用開發(fā)技術(shù)】SpringBoot怎么使用WebSocket實(shí)現(xiàn)群發(fā)消息_第5頁
已閱讀5頁，還剩3頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

【移動應(yīng)用開發(fā)技術(shù)】SpringBoot怎么使用WebSocket實(shí)現(xiàn)群發(fā)消息

這篇文章主要介紹了SpringBoot怎么使用WebSocket實(shí)現(xiàn)群發(fā)消息的相關(guān)知識，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇SpringBoot怎么使用WebSocket實(shí)現(xiàn)群發(fā)消息文章都會有所收獲，下面我們一起來看看吧。WebSocket是一種在單個(gè)TCP連接上進(jìn)行全雙工通信的協(xié)議，已被W3C定為標(biāo)準(zhǔn)。使用WebSocket可以使得客戶端和服務(wù)器之間的數(shù)據(jù)交換變得更加簡單。在WebSocket協(xié)議中，瀏覽器和服務(wù)器只需要完成一次握手，兩者之間就可以直接創(chuàng)建持久性的連接，并進(jìn)行雙向數(shù)據(jù)傳輸。特點(diǎn)WebSocket使用時(shí)需要先創(chuàng)建連接，這使得Websocket成為一種有狀態(tài)的協(xié)議，在之后的通信過程中可以省略部分狀態(tài)信息（例如身份認(rèn)證等）。WebSocket連接在端口80（ws）或者443（wss）上創(chuàng)建，與HTTP使用的端口相同，這樣，基本上所有的防火墻都不會阻止WebSocket連接。WebSocket使用HTTP協(xié)議進(jìn)行握手，因此它可以自然而然地集成到網(wǎng)絡(luò)瀏覽器和HTTP服務(wù)器中，而不需要額外的成本。心跳消息（ping和pong）將被反復(fù)的發(fā)送，進(jìn)而保持WebSocket連接一直處于活躍狀態(tài)。使用該協(xié)議，當(dāng)消息啟動或者到達(dá)的時(shí)候，服務(wù)端和客戶端都可以知道。WebSocket連接關(guān)閉時(shí)將發(fā)送一個(gè)特殊的關(guān)閉消息。WebSocket支持跨域，可以避免Ajax的限制。HTTP規(guī)范要求瀏覽器將并發(fā)連接數(shù)限制為每個(gè)主機(jī)名兩個(gè)連接，但是當(dāng)我們使用Websocket的時(shí)候，當(dāng)握手完成之后，該限制就不存在了，因?yàn)榇藭r(shí)的連接已經(jīng)不再是HTTP連接了。WebSocket協(xié)議支持?jǐn)U展，用戶可以擴(kuò)展協(xié)議，實(shí)現(xiàn)部分自定義的子協(xié)議。WebSocket擁有更好的二進(jìn)制支持以及更好的壓縮效果。一、添加依賴<dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-websocket</artifactId>

</dependency>二、配置WebSocketSpring框架提供了基于WebSocket的STOMP支持，STOMP是一個(gè)簡單的可互操作的協(xié)議，通常被用于通過中間服務(wù)器在客戶端之間進(jìn)行異步消息傳遞。@Configuration

@EnableWebSocketMessageBroker

public

class

WebSocketConfig

implements

WebSocketMessageBrokerConfigurer

{

@Override

public

void

configureMessageBroker(MessageBrokerRegistry

config)

{

//

設(shè)置消息代理的前綴，如果消息的前綴為"/topic"，就會將消息轉(zhuǎn)發(fā)給消息代理（broker）

//

再由消息代理廣播給當(dāng)前連接的客戶端

config.enableSimpleBroker("/topic");

//

下面方法可以配置一個(gè)或多個(gè)前綴，通過這些前綴過濾出需要被注解方法處理的消息。

//

例如這里表示前綴為"/app"的destination可以通過@MessageMapping注解的方法處理

//

而其他

destination（例如"/topic""/queue"）將被直接交給

broker

處理

config.setApplicationDestinationPrefixes("/app");

}

@Override

public

void

registerStompEndpoints(StompEndpointRegistry

registry)

{

//

定義一個(gè)前綴為"/chart"的endpoint，并開啟

sockjs

支持。

//

sockjs

可以解決瀏覽器對WebSocket的兼容性問題，客戶端將通過這里配置的URL建立WebSocket連接

registry.addEndpoint("/chat").withSockJS();

}

}三、服務(wù)端代碼根據(jù)上面WebSocketConfig的配置，@MessageMapping("/hello")注解的方法將用來接收“/app/hello”路徑發(fā)送來的消息，在注解方法中對消息進(jìn)行處理后，再將消息轉(zhuǎn)發(fā)到@SendTo定義的路徑上。而@SendTo路徑是一個(gè)前綴為“/topic”的路徑，因此該消息被交給消息代理broker，再由broker進(jìn)行廣播。@Controller

public

class

DemoController

{

@MessageMapping("/hello")

@SendTo("/topic/greetings")

public

Message

greeting(Message

message)

throws

Exception

{

return

message;

}

}@Data

public

class

Message

{

private

String

name;

private

String

content;

}四、前端代碼

在resources/static目錄下創(chuàng)建chat.html頁面作為聊天頁面。<!DOCTYPE

html>

<html

lang="en">

<head>

<meta

charset="UTF-8">

<title>群聊</title>

<script

src="/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script

src="/ajax/libs/sockjs-client/1.1.2/sockjs.min.js"></script>

<script

src="/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>

<script>

var

stompClient

=

null;

//

根據(jù)是否已連接設(shè)置頁面元素狀態(tài)

function

setConnected(connected)

{

$("#connect").prop("disabled",

connected);

$("#disconnect").prop("disabled",

!connected);

if

(connected)

{

$("#conversation").show();

$("#chat").show();

}

else

{

$("#conversation").hide();

$("#chat").hide();

}

$("#greetings").html("");

}

//

建立一個(gè)WebSocket連接

function

connect()

{

//

用戶名不能為空

if

(!$("#name").val())

{

return;

}

//

首先使用

SockJS

建立連接

var

socket

=

new

SockJS('/chat');

//

然后創(chuàng)建一個(gè)STOMP實(shí)例發(fā)起連接請求

stompClient

=

Stomp.over(socket);

//

連接成功回調(diào)

stompClient.connect({},

function

(frame)

{

//

進(jìn)行頁面設(shè)置

setConnected(true);

//

訂閱服務(wù)端發(fā)送回來的消息

stompClient.subscribe('/topic/greetings',

function

(greeting)

{

//

將服務(wù)端發(fā)送回來的消息展示出來

showGreeting(JSON.parse(greeting.body));

});

});

}

//

斷開WebSocket連接

function

disconnect()

{

if

(stompClient

!==

null)

{

stompClient.disconnect();

}

setConnected(false);

}

//

發(fā)送消息

function

sendName()

{

stompClient.send("/app/hello",

{},

JSON.stringify({'name':

$("#name").val(),'content':$("#content").val()}));

}

//

將服務(wù)端發(fā)送回來的消息展示出來

function

showGreeting(message)

{

$("#greetings")

.append("<div>"

+

+":"+message.content

+

"</div>");

}

//

頁面加載后進(jìn)行初始化動作

$(function

()

{

$(

"#connect"

).click(function()

{

connect();

});

$(

"#disconnect"

).click(function()

{

disconnect();

});

$(

"#send"

).click(function()

{

sendName();

});

});

</script>

</head>

<body>

<div>

<label

for="name">請輸入用戶名：</label>

<input

type="text"

id="name"

placeholder="用戶名">

</div>

<div>

<button

id="connect"

type="button">連接</button>

<button

id="disconnect"

type="button"

disabled="disabled">斷開連接</button>

</div>

<div

id="chat"

>

<div>

<label

for="name">請輸入聊天內(nèi)容：</label>

<input

type="text"

id="content"

placeholder="聊天內(nèi)容">

</div>

<button

id="send"

type="button">發(fā)送</button>

<div

id="greetings">

<div

id="conversation"

>群聊進(jìn)行中...</div>

</div>

</div>

</body>

</html>SockJS是一個(gè)瀏覽器JavaScript庫，提供類似于WebSocket的對象。SockJS為您提供了一個(gè)一致

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論