วิธีอัปเดตกราฟเส้นแบบประกายไฟทุก 3 วินาทีใน Spring MVC (อัปเดตตามเวลาจริง)

เผยแพร่แล้ว: 2013-06-17

การสอนกราฟ Sparkline.js โดยใช้ Spring MVC 4.2.2 - Crunchify Tips

jQuery Sparkline: ปลั๊กอิน jQuery นี้ทำให้ง่ายต่อการสร้าง Sparklines ประเภทต่าง ๆ โดยตรงในเบราว์เซอร์โดยใช้ HTML และ Javascript สองบรรทัดออนไลน์

ปลั๊กอินไม่มีการพึ่งพาอื่นใดนอกจาก jQuery และใช้งานได้กับเบราว์เซอร์ที่ทันสมัยทั้งหมด

ตอนนี้ มาใช้ไลบรารีนี้ในสถาปัตยกรรม Spring MVC สำหรับ Real Time Web Application ของคุณ ต่อไปนี้คือขั้นตอนคร่าวๆ ของสิ่งที่เราจะทำที่นี่:

  • ใน Spring MVC ตัวควบคุมของฉันรับข้อมูลทุก 3 วินาทีและส่งไปยังไฟล์ .jsp (ดู)
  • ดูไฟล์ (.jsp) รับข้อมูล JSONArray ทุก 3 วินาทีผ่านการโทร AJAX
  • การโทร AJAX จะส่งข้อมูลไปยังฟังก์ชันuseJSONData(jsonArray)
  • บริโภคJSONData อัพเดต Sparkline ทุกๆ 3 วินาที

มาเริ่มการเข้ารหัสกันเถอะ:

ขั้นตอนที่ 1

Pre-Requisite: https://crunchify.com/hello-world-example-spring-mvc-3-2-1/ (ทำให้โครงการนี้ใช้งานได้สำเร็จบน Tomcat)

คุณต้องการการพึ่งพา json.jar Maven เพิ่มเติมด้านล่าง เปิดไฟล์ pom.xml และเพิ่มการพึ่งพาด้านล่าง

pom.xml
1
2
3
4
5
< dependency >
< groupId > org . json < / groupId >
< artifactId > json < / artifactId >
< version > 20150729 < / version >
< / dependency >

ขั้นตอนที่ 2

สร้างไฟล์ CrunchifySpringSparklineConsumeJSONArray .java ภายใต้แพ็คเกจ com.crunchify.controller

CrunchifySpringSparklineConsumeJSONArray.java
Java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
package com . crunchify . controller ;
 
import java . util . Random ;
 
import org . json . JSONArray ;
import org . json . JSONException ;
import org . json . JSONObject ;
import org . springframework . stereotype . Controller ;
import org . springframework . web . bind . annotation . RequestMapping ;
import org . springframework . web . bind . annotation . RequestMethod ;
import org . springframework . web . bind . annotation . ResponseBody ;
import org . springframework . web . servlet . ModelAndView ;
 
/**
* @author Crunchify.com
*
*/
 
@Controller
public class CrunchifySpringSparklineConsumeJSONArray {
 
     @RequestMapping ( "/sparkline" )
     public ModelAndView crunchifySparklineTest ( ) {
         return new ModelAndView ( "sparkline" , "message" , "Sparkline.js Example which accepts JSONArray value every 3 seconds & updates graphs.." ) ;
     }
 
     @RequestMapping ( value = "/sparklinetest" , method = RequestMethod . GET )
     public @ResponseBody
     String constructJSONArray ( ) throws JSONException {
 
         JSONObject one = new JSONObject ( ) ;
         JSONObject two = new JSONObject ( ) ;
         JSONObject three = new JSONObject ( ) ;
 
         JSONArray result = new JSONArray ( ) ;
         Random r = new Random ( ) ;
         int [ ] r1 = { r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) } ;
         int [ ] r2 = { r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) } ;
         int [ ] r3 = { r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) } ;
 
         one . put ( "one" , r1 ) ;
         two . put ( "two" , r2 ) ;
         three . put ( "three" , r3 ) ;
 
         result . put ( one ) ;
         result . put ( two ) ;
         result . put ( three ) ;
 
         JSONObject jsonObj = new JSONObject ( ) ;
         jsonObj . put ( "sparkData" , result ) ;
         System . out . println ( "Sendig this data to view (sparkline.jsp): " + jsonObj . toString ( ) ) ;
 
         return jsonObj . toString ( ) ;
     }
}

ขั้นตอนที่ 3

ไฟล์ Creare sparkline.jsp ภายใต้โฟลเดอร์ /WebContent/WEB-INF/jsp โฟลเดอร์

sparkline.jsp
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
< html >
< head >
< TITLE > Crunchify - Sparkline . js Example which accepts JSONArray
     value every 3 seconds < / TITLE >
 
<style type ="text/css">
body {
     background-image :
         url ( 'https://cdn.crunchify.com/wp-content/uploads/2013/03/Crunchify.bg_.300.png' ) ;
}
</style>
<script type = "text/javascript"
     src = "http://code.jquery.com/jquery-1.10.1.min.js" > </script>
<script
     src = "https://cdn.crunchify.com/wp-content/uploads/code/jquery.sparkline.js" > </script>
 
<script type = "text/javascript" >
     function crunchifySparkline ( ) {
         $ . ajax ( {
             url : 'sparklinetest.html' ,
             dataType : "json" ,
             cache : false ,
             contentType : 'application/json; charset=utf-8' ,
             type : 'GET' ,
             success : function ( result ) {
                 var one = result . sparkData ;
                 //alert(one);
                 consumeJSONData ( one ) ;
             }
         } ) ;
     }
 
     function consumeJSONData ( sparkData ) {
         console . log ( sparkData ) ;
         for ( var i = 0 ; i < sparkData . length ; i ++ ) {
             var obj = sparkData [ i ] ;
             var crunchifyName ;
             var crunchifyValue ;
             for ( var key in obj ) {
                 crunchifyName = key ;
                 crunchifyValue = obj [ key ] . toString ( ) ;
                 crunchifyValue = crunchifyValue . substr ( 1 ) ;
                 crunchifyValue = crunchifyValue . substring ( 0 ,
                         crunchifyValue . length - 1 ) ;
                 var n = crunchifyValue . split ( "," ) ;
                 console . log ( n ) ;
                 $ ( "#" + crunchifyName ) . sparkline ( n , {
                     type : 'line' ,
                     width : '80' ,
                     fillColor : '#eeeeee'
                 } ) ;
             }
         }
     }
</script>
 
<script type = "text/javascript" >
     var intervalId = 0 ;
     intervalId = setInterval ( crunchifySparkline , 3000 ) ;
</script>
< / head >
 
< body >
     < div align = "center" >
         < br > < br > $ { message } < br > < br >
         < div id = "result" > < / div >
 
         < br >
         < br > Sparkline One : &nbsp; &nbsp; &nbsp; &nbsp; < span id = "one" > . < / span >
         < br >
         < br > Sparkline Two : &nbsp; &nbsp; &nbsp; &nbsp; < span id = "two" > . < / span >
         < br >
         < br > Sparkline Three : &nbsp; &nbsp; &nbsp; &nbsp; < span id = "three" > . < / span >
         < br >
         < br > < br > < br >
 
         < div
             style = "font-family: verdana; line-height: 25px; padding: 5px 10px; border-radius: 10px; border: 3px solid #EE872A; width: 50%; font-size: 12px;" >
 
             Sparkline . js Example which accepts JSONArray value every 3 seconds by
             < a href = 'https://crunchify.com' > Crunchify < / a > . Click < a
                 href = 'https://crunchify.com/category/java-tutorials/' > here < / a >
             for all Java , Spring MVC , Web Development examples . < br >
         < / div >
     < / div >
< / body >
< / html >

ต้องอ่านอีก:

  • ตัวอย่าง Java Enum อย่างง่าย
  • ตัวอย่าง Java MailAPI – ส่งอีเมลผ่าน GMail SMTP
  • Daemon Thread ใน Java คืออะไร? ตัวอย่างที่แนบมา

ขั้นตอนที่ 4

ชำระเงินโครงสร้างไดเรกทอรีนี้

กราฟเส้นแบบประกายไฟโดยใช้ Spring MVC - อัปเดตทุกๆ 3 วินาที

ขั้นตอนที่ -5

ปรับใช้โครงการ CrunchifySpringMVCTutorial อีกครั้งใน Apache Tomcat Server อีกครั้ง

  • ไปที่แท็บ Server ใน Eclipse
  • คลิก Clean...
  • คลิกที่ Publish
  • คลิกที่ Restart

ขั้นตอนที่ 6

เปิดเว็บเบราว์เซอร์และไปที่ URL นี้เพื่อดูผลลัพธ์: http://localhost:8080/CrunchifySpringMVCTutorial/sparkline.html

จะตรวจสอบผลและตรวจสอบโฟลว์ได้อย่างไร?

ขั้นตอนที่ 1

ระวังผลลัพธ์ของคุณ.. มันควรจะเหมือนกับที่คุณเห็นที่ด้านบนของหน้านี้

ขั้นตอนที่ 2

ตรวจสอบเอาต์พุตคอนโซล Eclipse คุณจะเห็นบันทึกคอนโซลพร้อมข้อมูลทุก 3 วินาที นั่นหมายถึงตัวควบคุม Spring MVC กำลังส่งข้อมูลไปยังหน้า JSP ทุกๆ 3 วินาที

ตัวควบคุม Spring MVC กำลังส่งข้อมูลไปยังหน้า JSP ทุกๆ 3 วินาที

ขั้นตอนที่ 3

ชำระเงินคอนโซลเบราว์เซอร์เพื่อดูข้อมูลสด

  1. คลิกขวาที่หน้าเพื่อเลือก Inspect Element
  2. เลือกแท็บ console

ข้อมูลสดของ Spring MVC เชื่อมต่อกับเบราว์เซอร์ Chrome - Crunchify Tips