Spring WebSocket 2 (Spring websocket Introductory tutorial) < go >

See More:spring WebSocket Reference
The whole example is part of Wisemenuframework and can clone the whole project, and if friends have needs, I can organize a separate demo.

Next: Spring WebSocket 1 (Spring websocket Introductory tutorial)

WebSocket Front-end preparation

Front-end we need to use two JS files:
Sockjs.js and Stomp.js

• SOCKJS:
  SOCKJS is a JavaScript library running on a browser, and if the browser does not support WebSocket, the library can emulate support for WebSocket, implementing a low-latency, full-duplex, cross-domain communication channel between the browser and the WEB server.
• Stomp
  Stomp provides a framework for extensive message transfer between the client and the agent. Stomp is a very simple and easy-to-use protocol implementation, although it can be very complex to write a proxy, but it is simple to write a Stomp client, and you can use Telnet to interact with your Stomp proxy.

Send announcement feature

HTML code

<Div><Div><buttonId="Connect"onclick="Connect ();" >connect</Button><buttonId="Disconnect"Disabled="Disabled"onclick="Disconnect ();" >disconnect</Button></Div><DivId="Conversationdiv" ><P><Label>notice content?</Label></P><P><TextAreaId= "name" rows= "5" > </textarea> </ p> <button id= "sendname" onclick= "Sendname ();" >send</button> <p id=" response "> </p> </div> </DIV>          

JavaScript code

<ScriptSrc="/js/sockjs-0.3.4.min.js" ></Script><ScriptSrc="/js/stomp.min.js" ></Script><Script> var stompclient =NullfunctionSetconnected (Connected) {document.getElementById (' Connect '). Disabled = connected;document.getElementById (' Disconnect '). Disabled =!connected;document.getElementById (' Conversationdiv '). style.visibility = connected?' Visible ':' Hidden ';document.getElementById (' response '). InnerHTML =‘‘; }Open the Socket connectionfunctionConnect) {var socket =New Sockjs ('/socket '); Stompclient = stomp.over (socket); Stompclient.connect ({},function (Frame) {setconnected (true); }); }Disconnecting the socket connectionfunction disconnect (if (stompclient! = null) { Stompclient.disconnect (); } setconnected (false); console.log ( "Disconnected");} //send Message to '/app/change-notice ' server function sendname (var value = document.getelementbyid ( ' name '). Value Stompclient.send ( "/app/change-notice", {}, value);} connect (); </SCRIPT>         

Related instructions:
The functionality of JavaScript to implement WebSocket is simple, basically in the following steps:

Open socket

1. var socket = new SockJS(‘/socket‘);Build a Sockjs object first
2. stompClient = Stomp.over(socket);Protocol encapsulation of SOCKJS with Stomp
3. stompClient.connect()Connect to the server and have a callback function to handle the operation information after the connection is successful.

Send Message

stompClient.send("/app/change-notice", {}, value);

Page preview:

Paste_image.png Modify Announcement function

When we send an announcement, the announcement information will be changed without refreshing the page, using WebSocket. The front-end code to send the announcement has been completed, and now we're going to write another client to receive the announcement from the first page, shown in the red box.
function is relatively simple, so the following only some of the JS code:

var noticesocket = function (var s = new sockjs ( '/socket '); var stompclient = Stomp.over (s); Stompclient.connect ({}, < Span class= "Hljs-keyword" >function (console.log ( ' notice socket connected! '); Stompclient.subscribe ( '/topic/notice ',  function (data) {$ ( ". Message Span.content '). HTML (data.body); }); });}; 

Related instructions:
Here and send the announcement code is different, after the establishment of a stompClient successful connection, we have to listen to the server sent over the message, received, changed the content of the announcement on the page, so the use ofstompClient.subscribe()
The subscribe() function of this method is to define a subscription address that is used to receive server-side information (in the server-side code, we @SendTo specify the subscription address "/topic/notice"), and when the message is received, the business logic is processed in the callback function.

At this point, all the functional development is complete!

Effect Demo

First we publish an announcement:

Then we cut to another page and found that the content has changed:

Recommended expand Reading

Wen/devid (author of Jane's book)
Original link: http://www.jianshu.com/p/8500ad65eb50
Copyright belongs to the author, please contact the author to obtain authorization, and Mark "book author".

Spring WebSocket 2 (Spring websocket Introductory tutorial) < go >