如何實現後臺向前臺傳資料如何實現後臺向前臺傳資料

阿新 • • 發佈：2018-11-14

如何實現後臺向前臺傳資料

技術交流群：233513714

這兩天正在研究如何讓後天主動向前臺展現資料，只要後臺有資料上傳的時候就向前臺上傳(因為公司有個專案，硬體裝置會不斷的上傳資料，服務端將接收到的資料向前臺展示)。在網上查了一下，下面將介紹一下其中的兩種解決辦法

一、WebSocket

WebSocket 是web客戶端和伺服器之間新的通訊方式，依然架構在HTTP協議之上。使用WebSocket連線， web應用程式可以執行實時的互動，而不是以前的poll方式。

WebSocket是HTML5開始提供的一種在單個 TCP 連線上進行全雙工通訊的協議，可以用來建立快速的更大規模的健壯的高效能實時的web應用程式。WebSocket通訊協議於2011年被IETF定為標準RFC 6455，WebSocketAPI被W3C定為標準。
在WebSocket API中，瀏覽器和伺服器只需要做一個握手的動作，然後，瀏覽器和伺服器之間就形成了一條快速通道。兩者之間就直接可以資料互相傳送。

什麼是WebSocket?

一個WebSocket是通過一個獨立的TCP連線實現的、非同步的、雙向的、全雙工的訊息傳遞實現機制。WebSockets不是一個HTTP連線，卻使用HTTP來引導一個WebSocket連線。一個全雙工的系統允許同時進行雙向的通訊。陸地線路電話是一個全雙工設施的例子，因為它們允許兩個通話者同時講話並被對方聽到。最初WebSocket被提議作為HTML5規範的一部分，HTML5承諾給現代的互動式的web應用帶來開發上的便利和網路效率，但是隨後WebSocket被移到一個僅用來存放WebSockets規範的獨立的標準文件裡。它包含兩件事情 -- WebSocket協議規範，即2011年12月釋出的RFC 6455，和WebSocket JavaScript API。

WebSocket協議利用HTTP 升級頭資訊來把一個HTTP連線升級為一個WebSocket連線。HTML5 WebSockets 解決了許多導致HTTP不適合於實時應用的問題，並且它通過避免複雜的工作方式使得應用結構很簡單。

最新的瀏覽器都支援WebSockets，

WebSocket是如何工作的?

每一個WebSocket連線的生命都是從一個HTTP請求開始的。HTTP請求跟其他請求很類似，除了它擁有一個Upgrade頭資訊。Upgrade頭資訊表示一個客戶端希望把連線升級為不同的協議。對WebSockets來說，它希望升級為WebSocket協議。當客戶端和伺服器通過底層連線第一次握手時，WebSocket連線通過把HTTP協議轉換升級為WebSockets協議而得以建立。一旦WebSocket連線成功建立，訊息就可以在客戶端和伺服器之間進行雙向傳送

WebSockets比其它工作方式比如輪詢更有效也更高效。因為它需要更少的頻寬並且降低了延時。
WebSockets簡化了實時應用的結構體系。
WebSockets在點到點發送訊息時不需要頭資訊。這顯著的降低了頻寬。

一些可能的WebSockets使用案例有:

聊天應用
多人遊戲
股票交易和金融應用
文件合作編輯
社交應用

JSR 356，WebSocket的Java API，規定了開發者把WebSockets 整合進他們的應用時可以使用的Java API — 包括伺服器端和Java客戶端。JSR 356是Java EE 7標準中的一部分。這意味著所有Java EE 7相容的應用伺服器都將有一個遵守JSR 356標準的WebSocket協議的實現。開發者也可以在Java EE 7應用伺服器之外使用JSR 356。目前Apache Tomcat 8提供了JSR 356 API的WebSocket支援。 Jboss Wildfly 8 (原JBoss Application Server)也支援JSR 356.

一個Java客戶端可以使用相容JSR 356的客戶端實現，來連線到WebSocket伺服器。對web客戶端來說，開發者可以使用WebSocket JavaScript API來和WebSocket伺服器進行通訊。WebSocket客戶端和WebSocket伺服器之間的區別，僅在於兩者之間是通過什麼方式連線起來的。一個WebSocket客戶端是一個WebSocket終端，它初始化了一個到對方的連線。一個WebSocket伺服器也是一個WebSocket終端，它被髮布出去並且等待來自對方的連線。在客戶端和伺服器端都有回撥監聽方法 -- onOpen , onMessage , onError, onClose。

怎麼建立你的第一個WebSocket應用呢？基本上我們還是會使用Javascript API編寫WebSocket客戶端，在伺服器端，本文使用JSR 356規範定義的通用模式和技術處理WebSocket的通訊。

下面看一個簡單的例子，演示瞭如果使用JavaScript WebSocket客戶端與執行在Wildfly 8伺服器通訊.

客戶端程式碼

 1 <html>
 2 <head>
 3 <meta http-equiv="content-type"content="text/html; charset=ISO-8859-1">
 4 </head>
 5  
 6 <body>
 7 <meta charset="utf-8">
 8 <title>HelloWorld Web sockets</title>
 9 <script language="javascript"type="text/javascript">
10 var wsUri = getRootUri() + "/websocket-hello/hello";
11  
12 function getRootUri() {
13 return "ws://" + (document.location.hostname == "" ? "localhost" :document.location.hostname) + ":" +
14 (document.location.port == "" ? "8080" :document.location.port);
15 }
16  
17 function init() {
18 output = document.getElementById("output");
19 }
20  
21 function send_message() {
22  
23 websocket = new WebSocket(wsUri);
24 websocket.onopen = function(evt) {
25 onOpen(evt)
26 };
27 websocket.onmessage = function(evt) {
28 onMessage(evt)
29 };
30 websocket.onerror = function(evt) {
31 onError(evt)
32 };
33  
34 }
35  
36 function onOpen(evt) {
37 writeToScreen("Connected to Endpoint!");
38 doSend(textID.value);
39  
40 }
41  
42 function onMessage(evt) {
43 writeToScreen("Message Received: " + evt.data);
44 }
45  
46 function onError(evt) {
47 writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
48 }
49  
50 function doSend(message) {
51 writeToScreen("Message Sent: " + message);
52 websocket.send(message);
53 }
54  
55 function writeToScreen(message) {
56 var pre = document.createElement("p");
57 pre.style.wordWrap = "break-word";
58 pre.innerHTML = message;
59  
60 output.appendChild(pre);
61 }
62  
63 window.addEventListener("load", init, false);
64  
65 </script>
66  
67 <h1 style="text-align: center;">Hello World WebSocket Client</h2>
68  
69 <br>
70  
71 <div style="text-align: center;">
72 <form action="">
73 <input onclick="send_message()" value="Send"type="button">
74 <input id="textID" name="message"value="Hello WebSocket!" type="text"><br>
75 </form>
76 </div>
77 <div id="output"></div>
78 </body>
79 </html>

如你所見，要想使用WebSocket協議與伺服器通訊, 需要一個WebSocket物件。它會自動連線伺服器.

websocket = new WebSocket(wsUri);

連線上會觸發open事件：

1 websocket.onopen = function(evt) {
2 onOpen(evt)
3 };

一旦連線成功，則向伺服器傳送一個簡單的hello訊息。

1 websocket.send(message);

伺服器端程式碼

有兩種建立伺服器端程式碼的方法：

註解方式Annotation-driven: 通過在POJO加上註解, 開發者就可以處理WebSocket 生命週期事件.
實現介面方式Interface-driven: 開發者可以實現Endpoint介面和宣告週期的各個方法.

建議開發時採用註解方式，這樣可以使用POJO就可以實現WebSocket Endpoint. 而且不限定處理事件的方法名。程式碼也更簡單。

本例就採用註解的方式，接收WebSocket請求的類是一個POJO, 通過@ServerEndpoint標註. 這個註解告訴容器此類應該被當作一個WebSocket的Endpoint。value值就是WebSocket endpoint的path.

 1 package com.sample.websocket;
 2  
 3 import javax.websocket.*;
 4 import javax.websocket.server.ServerEndpoint;
 5  
 6  
 7 @ServerEndpoint("/hello")
 8 public class HelloWorldEndpoint {
 9  
10  
11 @OnMessage
12 public String hello(String message) {
13 System.out.println("Received : "+ message);
14 return message;
15 }
16  
17 @OnOpen
18 public void myOnOpen(Session session) {
19 System.out.println("WebSocket opened: " + session.getId());
20 }
21  
22 @OnClose
23 public void myOnClose(CloseReason reason) {
24 System.out.println("Closing a WebSocket due to " + reason.getReasonPhrase());
25 }
26  
27 }

注意：這個例子還包括了其它兩個回撥函式： @OnOpen標註的方法在WebSocket連線開始時被呼叫， Web Session作為引數。另外一個@OnClose標註的方法在連線關閉時被呼叫。

就是這麼簡單。但是為了編譯這個例子你還需要Websockets API的實現，它在WildFly 8釋出中（或者你用JSR 356的參考實現，或其它的容器提供的jar，如tomcat）:

1 modules\system\layers\base\javax\websocket\api\main\jboss-websocket-api_1.0_spec-1.0.0.Final.jar

對於Maven使用者，你需要增加undertow-websockets-jsr依賴

1 <dependency>
2 <groupId>org.jboss.spec.javax.websocket</groupId>
3 <artifactId>jboss-websocket-api_1.0_spec</artifactId>
4 <version>1.0.0.Final</version>
5 </dependency>

這個例子比較早，應該是2013年寫的,jsr 256還未釋出。現在，你應該直接使用Java EE提供的API

1 <dependency>
2 <groupId>javax.websocket</groupId>
3 <artifactId>javax.websocket-api</artifactId>
4 <version>1.1</version>
5 </dependency>

編解碼器

前面的例子中WebSocket通訊的訊息型別預設為String。接下來的例子演示如何使用Encoder和Decoder傳輸更復雜的資料。
Websocket使用Decoder將文字訊息轉換成Java物件，然後傳給@OnMessage方法處理; 而當物件寫入到session中時，Websocket將使用Encoder將Java物件轉換成文字，再發送給客戶端。
更常用的，我們使用XML 或者 JSON 來傳送資料，所以將會會將Java物件與XML/JSON資料相互轉換.

下圖描繪了客戶端和伺服器使用encoder/decoder標準通訊過程。

宣告Encoder/Decoder也是相當的簡單: 你只需在@ServerEndpoint註解中增加encoder/decoder設定：

 1 package com.sample.websocket;
 2  
 3 import java.util.logging.Level;
 4 import java.util.logging.Logger;
 5 import javax.websocket.*;
 6 import javax.websocket.server.ServerEndpoint;
 7  
 8 @ServerEndpoint(value = "/hello",
 9 decoders = {
10 MessageDecoder.class,},
11 encoders = {
12 MessageEncoder.class
13 })
14 public class HelloWorldEndpoint {
15  
16 @OnMessage
17 public Person hello(Person person, Session session) {
18 if (person.getName().equals("john")) {
19 person.setName("Mr. John");
20 }
21 try {
22 session.getBasicRemote().sendObject(person);
23 System.out.println("sent ");
24 } catch (Exception ex) {
25 Logger.getLogger(HelloWorldEndpoint.class.getName()).log(Level.SEVERE, null, ex);
26 }
27 return person;
28  
29 }
30  
31 @OnOpen
32 public void myOnOpen(Session session) {
33 }
34  
35 }

正像你看到的， OnMessage方法使用Java Object person作為引數，我們為名字增加個尊稱再返回給客戶端。通過session.getBasicRemote().sendObject(Object obj)返回資料.
容器負責使用你指定的Decoder將接收到的XML訊息轉為Java物件：

 1 package com.sample.websocket;
 2  
 3 import java.io.StringReader;
 4  
 5 import javax.websocket.Decoder;
 6 import javax.websocket.EndpointConfig;
 7 import javax.xml.bind.*;
 8  
 9  
10 public class MessageDecoder implementsDecoder.Text<Person> {
11  
12 @Override
13 public Person decode(String s) {
14 System.out.println("Incoming XML " + s);
15 Person person = null;
16 JAXBContext jaxbContext;
17 try {
18 jaxbContext = JAXBContext.newInstance(Person.class);
19  
20 Unmarshaller unmarshaller = jaxbContext.createUnmarshaller();
21  
22 StringReader reader = new StringReader(s);
23 person = (Person) unmarshaller.unmarshal(reader);
24 } catch (Exception ex) {
25 ex.printStackTrace();
26 }
27 return person;
28 }
29  
30 @Override
31 public boolean willDecode(String s) {
32  
33 return (s != null);
34 }
35  
36 @Override
37 public void init(EndpointConfig endpointConfig) {
38 // do nothing.
39 }
40  
41 @Override
42 public void destroy() {
43 // do nothing.
44 }
45 }

這裡我們使用JAXB做轉換。我們只要實現一個泛型介面Decoder.Text 或者 Decoder.Binary，根據你傳輸的資料是文字還是二進位制選擇一個.

所以資料由Decoder解碼，傳給Endpoint (這裡的 HelloWorldEndpoint)，在返回給client之前，它還會被下面的Encoder轉換成XML:

 1 package com.sample.websocket;
 2  
 3 import java.io.StringWriter;
 4  
 5 import javax.websocket.EncodeException;
 6 import javax.websocket.Encoder;
 7 import javax.websocket.EndpointConfig;
 8 import javax.xml.bind.JAXBContext;
 9 import javax.xml.bind.Marshaller;
10  
11 public class MessageEncoder implementsEncoder.Text<Person> {
12  
13 @Override
14 public String encode(Person object) throws EncodeException {
15  
16 JAXBContext jaxbContext = null;
17 StringWriter st = null;
18 try {
19 jaxbContext = JAXBContext.newInstance(Person.class);
20  
21 Marshaller marshaller = jaxbContext.createMarshaller();
22 st = new StringWriter();
23 marshaller.marshal(object, st);
24 System.out.println("OutGoing XML " + st.toString());
25  
26 } catch (Exception ex) {
27 ex.printStackTrace();
28 }
29 return st.toString();
30 }
31  
32 @Override
33 public void init(EndpointConfig endpointConfig) {
34 // do nothing.
35 }
36  
37 @Override
38 public void destroy() {
39 // do nothing.
40 }
41 }

為了測試這個例子，將客戶端的網頁稍微修改一下以便能在textarea中粘帖XML：

 1 <html>
 2 <head>
 3 <meta http-equiv="content-type"content="text/html; charset=ISO-8859-1">
 4 </head>
 5  
 6 <body>
 7 <meta charset="utf-8">
 8 <title>HelloWorld Web sockets</title>
 9 <script language="javascript"type="text/javascript">
10 var wsUri = getRootUri() + "/websocket-hello/hello";
11  
12 function getRootUri() {
13 return "ws://" + (document.location.hostname == "" ? "localhost" :document.location.hostname) + ":" +
14 (document.location.port == "" ? "8080" :document.location.port);
15 }
16  
17 function init() {
18 output = document.getElementById("output");
19 }
20  
21 function send_message() {
22  
23 websocket = new WebSocket(wsUri);
24 websocket.onopen = function(evt) {
25 onOpen(evt)
26 };
27 websocket.onmessage = function(evt) {
28 onMessage(evt)
29 };
30 websocket.onerror = function(evt) {
31 onError(evt)
32 };
33  
34 }
35  
36 function onOpen(evt) {
37 writeToScreen("Connected to Endpoint!");
38 doSend(textID.value);
39  
40 }
41  
42 function onMessage(evt) {
43 writeToScreen("Message Received: " + evt.data);
44 }
45  
46 function onError(evt) {
47 writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
48 }
49  
50 function doSend(message) {
51 writeToScreen("Message Sent: " + message);
52 websocket.send(message);
53 }
54  
55 function writeToScreen(message) {
56 alert(message);
57  
58 }
59  
60 window.addEventListener("load", init, false);
61  
62 </script>
63  
64 <h1 style="text-align: center;">Hello World WebSocket Client</h2>
65  
66 <br>
67  
68 <div style="text-align: center;">
69 <form action="">
70 <input onclick="send_message()" value="Send"type="button">
71 <textarea id="textID" rows="4" cols="50"name="message" >
72 </textarea>
73 </form>
74 </div>
75 <div id="output"></div>
76 </body>
77 </html>

在文字框中輸入下面的XML進行測試。

1 <person>
2 <name>john</name>
3 <surname>smith</surname>
4 </person>

這篇文章摘自http://colobu.com/2015/02/27/WebSockets-tutorial-on-Wildfly-8/（翻譯自 mastertheboss的 WebSockets tutorial on Wildfly 8）

 1 二、輪詢
 2 前臺程式碼：
 3 $(document).ready(function() {
 4 　　setInterval(checkIsExist, 1000);
 5 });
 6 
 7 function checkIsExist() {
 8 　　var urls = "/LogForPage/getShiftCarOrderCarId.do?ajax=1";
 9 　　var htmlobj = $.ajax({
10 　　　　url : urls,
11 　　　　async : false
12 　　});
13 　　var list = eval(htmlobj.responseText);
14 　　$("#textarea-input").html(list);
15 }
16 
17  
18 
19 後臺程式碼：
20 
21 import javax.annotation.Resource;
22 import javax.servlet.http.HttpServletResponse;
23 
24 import org.codehaus.jackson.map.ObjectMapper;
25 import org.springframework.stereotype.Controller;
26 import org.springframework.web.bind.annotation.RequestMapping;
27 
28 import com.aotoso.control.ConnectionManage.PortCommunication;
29 import com.aotoso.control.base.BaseController;
30 import com.aotoso.server.FirstDataManage.EverydayPlanService;
31 
32 
33 @Controller
34 @RequestMapping("/LogForPage")
35 public class LogForPage extends BaseController {
36 @Resource(name = "everydayPlanService")
37 EverydayPlanService everydayPlanService;
38 
39 /**
40 * 實時列印上傳的資訊！
41 * @param session
42 * @param request
43 * @param response
44 */
45 @RequestMapping(value = "/TMRInfromation")
46 public void getShiftCarOrderCarId(HttpServletResponse response) {
47 　　pd = this.getPageData();
48 　　logger.info("實時列印上傳的資訊！");
49 　　ObjectMapper objectMapper = new ObjectMapper();
50 　　try {
51 　　　　objectMapper.writeValue(response.getOutputStream(),new PortCommunication().getInfo());
52 　　　　System.out.println(new PortCommunication().getInfo());
53 　　　　} catch (Exception e) {
54 　　　　　　e.printStackTrace();
55 　　　　}
56 　　}
57 }

技術交流群：233513714

一、WebSocket

什麼是WebSocket?

最新的瀏覽器都支援WebSockets，

WebSocket是如何工作的?

WebSockets比其它工作方式比如輪詢更有效也更高效。因為它需要更少的頻寬並且降低了延時。
WebSockets簡化了實時應用的結構體系。
WebSockets在點到點發送訊息時不需要頭資訊。這顯著的降低了頻寬。

一些可能的WebSockets使用案例有:

聊天應用
多人遊戲
股票交易和金融應用
文件合作編輯
社交應用

下面看一個簡單的例子，演示瞭如果使用JavaScript WebSocket客戶端與執行在Wildfly 8伺服器通訊.

客戶端程式碼

 1 <html>
 2 <head>
 3 <meta http-equiv="content-type"content="text/html; charset=ISO-8859-1">
 4 </head>
 5  
 6 <body>
 7 <meta charset="utf-8">
 8 <title>HelloWorld Web sockets</title>
 9 <script language="javascript"type="text/javascript">
10 var wsUri = getRootUri() + "/websocket-hello/hello";
11  
12 function getRootUri() {
13 return "ws://" + (document.location.hostname == "" ? "localhost" :document.location.hostname) + ":" +
14 (document.location.port == "" ? "8080" :document.location.port);
15 }
16  
17 function init() {
18 output = document.getElementById("output");
19 }
20  
21 function send_message() {
22  
23 websocket = new WebSocket(wsUri);
24 websocket.onopen = function(evt) {
25 onOpen(evt)
26 };
27 websocket.onmessage = function(evt) {
28 onMessage(evt)
29 };
30 websocket.onerror = function(evt) {
31 onError(evt)
32 };
33  
34 }
35  
36 function onOpen(evt) {
37 writeToScreen("Connected to Endpoint!");
38 doSend(textID.value);
39  
40 }
41  
42 function onMessage(evt) {
43 writeToScreen("Message Received: " + evt.data);
44 }
45  
46 function onError(evt) {
47 writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
48 }
49  
50 function doSend(message) {
51 writeToScreen("Message Sent: " + message);
52 websocket.send(message);
53 }
54  
55 function writeToScreen(message) {
56 var pre = document.createElement("p");
57 pre.style.wordWrap = "break-word";
58 pre.innerHTML = message;
59  
60 output.appendChild(pre);
61 }
62  
63 window.addEventListener("load", init, false);
64  
65 </script>
66  
67 <h1 style="text-align: center;">Hello World WebSocket Client</h2>
68  
69 <br>
70  
71 <div style="text-align: center;">
72 <form action="">
73 <input onclick="send_message()" value="Send"type="button">
74 <input id="textID" name="message"value="Hello WebSocket!" type="text"><br>
75 </form>
76 </div>
77 <div id="output"></div>
78 </body>
79 </html>

如你所見，要想使用WebSocket協議與伺服器通訊, 需要一個WebSocket物件。它會自動連線伺服器.

如何實現後臺向前臺傳資料如何實現後臺向前臺傳資料

如何實現後臺向前臺傳資料

什麼是WebSocket?

WebSocket是如何工作的?

客戶端程式碼

伺服器端程式碼

編解碼器

什麼是WebSocket?

WebSocket是如何工作的?

客戶端程式碼

spring boot 實現前段上傳圖片，後臺將圖片轉存的前臺伺服器(FTPClient)

前臺通過base64傳圖片到後臺的實現方法

jsp頁面通過ajax向後臺傳參實現收藏功能

jsp----從後臺傳過來的資料預設展示到前臺jsp頁面

ajax提交資料到後臺php接收(實現方法)

ajax 非同步請求向後臺傳陣列型別資料，後臺無法接收的原因

javaWeb從前臺傳資料到後臺漢字亂碼問題的解決

vue 傳base64到後臺後臺傳到oss的java實現

通過JS獲取前臺資料，並向後臺一般處理程式傳遞

前臺通過js 寫個ajax請求把資料傳給後臺，然後後臺接收到這個資料，再儲存到資料庫。。

利用ajax提交表單，實現資料前端後臺資料互動的完整流程演示

java後臺加安卓端實現頭像上傳功能

使用pager外掛實現分頁簡易使用示例（後臺分頁，前臺顯示）

Spring MVC從後臺讀取資料庫並顯示在前臺頁面的實現

如何實現將JS動態新增的TR中的值傳到後臺中並批量插入

ztree實現非同步載入(點選節點,請求後臺資料,新增資料到對應節點)

利用jquery的ajax實現非同步請求傳送資料到後臺

工廠模式實現併發請求多個介面（同步後臺資料實現離線APP）

jquery $.post() 向php傳值實現簡單的二級聯動

後臺跳轉頁的實現

如何實現後臺向前臺傳資料 如何實現後臺向前臺傳資料

什麼是WebSocket?

WebSocket是如何工作的?

客戶端程式碼

伺服器端程式碼

編解碼器

什麼是WebSocket?

WebSocket是如何工作的?

客戶端程式碼

相關推薦

如何實現後臺向前臺傳資料如何實現後臺向前臺傳資料