详细解析WebSocket+spring示例demo(已使用sockJs库)

作者:袖梨 2022-11-14

YPE htmlPUBLIC>

1ãç®ä»

ä½ä¸ºä¸ä¸ä»£çWebæ åï¼HTML5æ¥æè®¸å¤å¼äººæ³¨ç®çæ°ç¹æ§ï¼å¦ Canvasãæ¬å°å­å¨ãå¤åªä½ç¼ç¨æ¥å£ãWebSocketç­ç­ãè¿å¶ä¸­æâWebç TCPâä¹ç§°ç WebSocketæ ¼å¤å¸å¼å¼å人åçæ³¨æãWebSocketçåºç°ä½¿å¾æµè§å¨æä¾å¯¹ Socketçæ¯ææä¸ºå¯è½ï¼ä»è卿µè§å¨åæå¡å¨ä¹é´æä¾äºä¸ä¸ªåºäºTCPè¿æ¥çååééãWebå¼å人åå¯ä»¥é常æ¹ä¾¿å°ä½¿ç¨WebSocketæå»ºå®æ¶ web åºç¨ï¼å¼å人åçæä¸­ä»æ­¤åå¤äºä¸æç¥åµå©å¨ã

Web åºç¨çä¿¡æ¯äº¤äºè¿ç¨é常æ¯å®¢æ·ç«¯éè¿æµè§å¨ååºä¸ä¸ªè¯·æ±ï¼æå¡å¨ç«¯æ¥æ¶å审核å®è¯·æ±åè¿è¡å¤çå¹¶è¿åç»æç»å®¢æ·ç«¯ï¼ç¶å客æ·ç«¯æµè§å¨å°ä¿¡æ¯åç°åºæ¥ï¼è¿ç§æºå¶å¯¹äºä¿¡æ¯åå䏿¯ç¹å«é¢ç¹çåºç¨å°è½ç¸å®æ äºï¼ä½æ¯å¯¹äºé£äºå®æ¶è¦æ±æ¯è¾é«çåºç¨æ¥è¯´ï¼æ¯å¦è¯´å¨çº¿æ¸¸æãå¨çº¿è¯å¸ã设å¤çæ§ãæ°é»å¨çº¿æ­æ¥ãRSSè®¢éæ¨éç­ç­ï¼å½å®¢æ·ç«¯æµè§å¨åå¤åç°è¿äºä¿¡æ¯çæ¶åï¼è¿äºä¿¡æ¯å¨æå¡å¨ç«¯å¯è½å·²ç»è¿æ¶äºã

æä»¥ä¿æå®¢æ·ç«¯åæå¡å¨ç«¯çä¿¡æ¯åæ­¥æ¯å®æ¶ Webåºç¨çå³é®è¦ç´ ï¼å¯¹ Webå¼åäººåæ¥è¯´ä¹æ¯ä¸ä¸ªé¾é¢ãå¨ WebSocketè§èåºæ¥ä¹åï¼å¼åäººåæ³å®ç°è¿äºå®æ¶çWebåºç¨ï¼ä¸å¾ä¸éç¨ä¸äºæè¡·çæ¹æ¡ï¼å¶ä¸­æå¸¸ç¨çå°±æ¯è½®è¯¢(Polling)å Comet ææ¯ï¼èCometææ¯å®é䏿¯è½®è¯¢ææ¯çæ¹è¿ï¼åå¯ç»å为两ç§å®ç°æ¹å¼ï¼ä¸ç§æ¯é¿è½®è¯¢æºå¶ï¼ä¸ç§ç§°ä¸ºæµææ¯ã

Html5 WebSocket è®¾è®¡åºæ¥çç®çå°±æ¯è¦å代轮询å Cometææ¯ï¼ä½¿å®¢æ·ç«¯æµè§å¨å·å¤å C/Sæ¶æä¸æ¡é¢ç³»ç»ç宿¶é讯è½åãæµè§å¨éè¿JavaScriptåæå¡å¨ååºå»ºç« WebSocketè¿æ¥ç请æ±ï¼è¿æ¥å»ºç«ä»¥åï¼å®¢æ·ç«¯åæå¡å¨ç«¯å°±å¯ä»¥éè¿ TCPè¿æ¥ç´æ¥äº¤æ¢æ°æ®ãå ä¸º WebSocketè¿æ¥æ¬è´¨ä¸å°±æ¯ä¸ä¸ªTCPè¿æ¥ï¼æä»¥å¨æ°æ®ä¼ è¾çç¨³å®æ§åæ°æ®ä¼ è¾éç大尿¹é¢ï¼å轮询以åCometææ¯æ¯è¾ï¼å·æå¾å¤§çæ§è½ä¼å¿ã

使¯é´äºweb socket 对æµè§å¨è¦æ±æ¯è¾é«ï¼ä¸ºäºè§£å³è¿ä¸ªé®é¢ï¼æ¨åºäºsockJSï¼SockJSæ¯ä¸ä¸ªJavaScriptåºï¼æä¾è·¨æµè§å¨javascriptçAPIï¼å建äºä¸ä¸ªä½å»¶è¿ãå¨åå·¥çæµè§å¨åwebæå¡å¨ä¹é´éä¿¡ééã

2ãç¸å³ç¯å¢è¦æ±

Spring4.0.6(è¦éæ©4.0+),tomcat7.0.55çæ¬ï¼JDK1.7ã

3ãå·ä½ä»£ç 

ï¼ä»¥ä¸ä»£ç äº²æµå¯ç¨ï¼ï¼

ï¼1ï¼web.xml:

代ç å¦ä¸ å¤å¶ä»£ç 

<?xmlversionxmlversion ="1.0"encoding="UTF-8"?>

xmlns="http://xmlns.j***cp.org/xml/ns/javaee"

xmlns:xsi="http://www.**w*3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://xmlns.j***cp.org/xml/ns/javaee http://xmlns.j***cp.org/xml/ns/javaee/web-app_3_1.xsd">

ç¨æ¥æµè¯WebSocketåºç¡ä¸æ¨éçåè½

encodingFilter

org.springframework.web.filter.CharacterEncodingFilter

true

encoding

UTF-8

forceEncoding

true

encodingFilter

/*

org.springframework.web.context.ContextLoaderListener

org.springframework.web.util.IntrospectorCleanupListener

dispatcher

org.springframework.web.servlet.DispatcherServlet

contextConfigLocation

classpath:dispatcher-servlet.xml

1

true

dispatcher

/

30

testSocket.jsp

(2) dispatcher-servlet.xml

代ç å¦ä¸ å¤å¶ä»£ç 

<?xmlversionxmlversion ="1.0"encoding="UTF-8"?>

xmlns:xsi="http://www.**w*3.org/2001/XMLSchema-instance"

xmlns:beans="http://www.spring*fram*ewo*rk.org/schema/beans"

xmlns:context="http://www.spr*i*ngframewo*rk.org/schema/context"

xsi:schemaLocation="http://www.spri**ngfra*mework.org/schema/mvc http://www.spri**ngfra*mework.org/schema/mvc/spring-mvc.xsd

http://www.spring*fram*ewo*rk.org/schema/beans http://www.spring*fram*ewo*rk.org/schema/beans/spring-beans.xsd

http://www.spr*i*ngframewo*rk.org/schema/context http://www.spr*i*ngframewo*rk.org/schema/context/spring-context.xsd">

(3)HandshakeInterceptor.java

代ç å¦ä¸ å¤å¶ä»£ç 

packagezyy.sockjs.config;

importjava.util.Map;

importorg.springframework.http.server.ServerHttpRequest;

importorg.springframework.http.server.ServerHttpResponse;

importorg.springframework.stereotype.Component;

importorg.springframework.web.socket.WebSocketHandler;

importorg.springframework.web.socket.server.support.HttpSessionHandshakeInterceptor;

@Component

publicclassHandshakeInterceptorextendsHttpSessionHandshakeInterceptor {

@Override

publicbooleanbeforeHandshake(ServerHttpRequest request,

ServerHttpResponse response, WebSocketHandler wsHandler,

Map attributes)throwsException {

System.out.println("Before Handshake");

returnsuper.beforeHandshake(request,response,wsHandler,attributes);

}

@Override

publicvoidafterHandshake(ServerHttpRequest request,

ServerHttpResponse response, WebSocketHandler wsHandler,

Exception ex) {

System.out.println("After Handshake");

super.afterHandshake(request,response,wsHandler,ex);

}

}

(4)InfoSocketEndPoint.Java

代ç å¦ä¸ å¤å¶ä»£ç 

packagezyy.sockjs.config;

importorg.springframework.stereotype.Component;

importorg.springframework.web.socket.TextMessage;

importorg.springframework.web.socket.WebSocketSession;

importorg.springframework.web.socket.handler.TextWebSocketHandler;

@Component

publicclassInfoSocketEndPointextendsTextWebSocketHandler {

publicInfoSocketEndPoint() {

}

@Override

protectedvoidhandleTextMessage(WebSocketSession session,

TextMessage message)throwsException {

super.handleTextMessage(session, message);

TextMessage returnMessage =newTextMessage(message.getPayload()

+" received at server");

session.sendMessage(returnMessage);

}

}

(5)SystemWebSocketHandler.java

代ç å¦ä¸ å¤å¶ä»£ç 

packagezyy.sockjs.config;

importorg.springframework.stereotype.Component;

importorg.springframework.web.socket.CloseStatus;

importorg.springframework.web.socket.TextMessage;

importorg.springframework.web.socket.WebSocketHandler;

importorg.springframework.web.socket.WebSocketMessage;

importorg.springframework.web.socket.WebSocketSession;

/**

*

* @author dayu

*/

@Component

publicclassSystemWebSocketHandlerimplementsWebSocketHandler {

@Override

publicvoidafterConnectionEstablished(WebSocketSession session)throwsException {

System.out.println("connect to the websocket success......");

session.sendMessage(newTextMessage("Server:connected OK!"));

}

@Override

publicvoidhandleMessage(WebSocketSession wss, WebSocketMessage> wsm)throwsException {

TextMessage returnMessage =newTextMessage(wsm.getPayload()

+" received at server");

wss.sendMessage(returnMessage);

}

@Override

publicvoidhandleTransportError(WebSocketSession wss, Throwable thrwbl)throwsException {

if(wss.isOpen()){

wss.close();

}

System.out.println("websocket connection closed......");

}

@Override

publicvoidafterConnectionClosed(WebSocketSession wss, CloseStatus cs)throwsException {

System.out.println("websocket connection closed......");

}

@Override

publicbooleansupportsPartialMessages() {

returnfalse;

}

}

(6)WebSocketConfig.java

代ç å¦ä¸ å¤å¶ä»£ç 

packagezyy.sockjs.config;

importorg.springframework.context.annotation.Bean;

importorg.springframework.context.annotation.Configuration;

importorg.springframework.web.servlet.config.annotation.EnableWebMvc;

importorg.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

importorg.springframework.web.socket.WebSocketHandler;

importorg.springframework.web.socket.config.annotation.EnableWebSocket;

importorg.springframework.web.socket.config.annotation.WebSocketConfigurer;

importorg.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;

@Configuration

@EnableWebMvc

@EnableWebSocket

publicclassWebSocketConfigextendsWebMvcConfigurerAdapterimplements

WebSocketConfigurer {

publicWebSocketConfig() {

}

@Override

publicvoidregisterWebSocketHandlers(WebSocketHandlerRegistry registry) {

registry.addHandler(systemWebSocketHandler(),"/websck").addInterceptors(newHandshakeInterceptor());

System.out.println("registed!");

registry.addHandler(systemWebSocketHandler(),"/sockjs/websck/info").addInterceptors(newHandshakeInterceptor())

.withSockJS();

}

@Bean

publicWebSocketHandler systemWebSocketHandler() {

returnnewSystemWebSocketHandler();

}

}

(7)testSocket.jsp

代ç å¦ä¸ å¤å¶ä»£ç 

WebSocket/SockJS Echo Sample (Adapted from Tomcat's echo sample)

#connect-container {

float: left;

width: 400px

}

#connect-container div {

padding: 5px;

}

#console-container {

float: left;

margin-left: 15px;

width: 400px;

}

#console {

border:1px solid #CCCCCC;

border-right-color:#33333333;

border-bottom-color:#999999;

height: 170px;

overflow-y: scroll;

padding: 5px;

width: 100%;

}

#console p {

padding: 0;

margin: 0;

}

var ws = null;

var url = null;

var transports = [];

function setConnected(connected) {

document.getElementById('connect').disabled = connected;

document.getElementById('disconnect').disabled = !connected;

document.getElementById('echo').disabled = !connected;

}

function connect() {

if (!url) {

log('Select whether to use W3C WebSocket or SockJS');

return;

}

//ws = (url.indexOf('sockjs') != -1) ?new SockJS(url, undefined, {protocols_whitelist: transports}) : new WebSocket(url);

if ('WebSocket'in window) {

ws= new WebSocket("ws://localhost:8080/SpringSocketJs/websck");

}else {

ws = new SockJS("http://*lo*calhost*:8080/SpringSocketJs/sockjs/websck/info");

}

//websocket = new SockJS("http://loc*alhost:**8084/SpringWebSocketPush/sockjs/websck");

ws.onopen = function () {

setConnected(true);

//log('Info: connection opened.');

};

ws.onmessage = function (event) {

log('Received:' + event.data);

};

ws.onclose = function (event) {

setConnected(false);

log('Info: connection closed.');

log(event);

};

}

function disconnect() {

if (ws != null) {

ws.close();

ws = null;

}

setConnected(false);

}

function echo() {

if (ws != null) {

var message = document.getElementById('message').value;

log('Sent:' + message);

ws.send(message);

} else {

alert('connection not established, please connect.');

}

}

function updateUrl(urlPath) {

if (urlPath.indexOf('sockjs') != -1) {

url = urlPath;

document.getElementById('sockJsTransportSelect').style.visibility ='visible';

}

else {

if (window.location.protocol =='http:') {

url = 'ws://' + window.location.host + urlPath;

}else{

url = 'wss://' + window.location.host + urlPath;

}

document.getElementById('sockJsTransportSelect').style.visibility ='hidden';

}

}

function updateTransport(transport) {

transports = (transport == 'all') ? [] : [transport];

}

function log(message) {

var console = document.getElementById('console');

var p = document.createElement('p');

p.style.wordWrap = 'break-word';

p.appendChild(document.createTextNode(message));

console.appendChild(p);

while (console.childNodes.length > 25) {

console.removeChild(console.firstChild);

}

console.scrollTop = console.scrollHeight;

}

Seems your browser doesn't supportJavascript!Websockets

rely on Javascript being enabled. Please enable

Javascript and reloadthispage!

W3C WebSocket


SockJS

SockJS transport:

all

websocket

xhr-polling

jsonp-polling

xhr-streaming

iframe-eventsource

iframe-htmlfile

Connect

Disconnect

Here is a message!

Echo message

相关文章

精彩推荐