teratail
回答率
85.47%
質問するログイン新規登録
トップGoに関する質問Goでメソッドの処理状況をブラウザに返すプログレスバーは導入できるのか？

編集履歴

質問編集履歴

3

コード修正

2022/06/11 08:11

投稿

mimi_129
mimi_129

スコア63

test CHANGED
File without changes
test CHANGED
@@ -104,6 +104,7 @@
104
104
 
105
105
  // ルーティング
106
106
  e.GET("/progress", progress)
107
+ e.GET("/longtask", longtask)
107
108
 
108
109
  // local サーバー
109
110
  e.Logger.Fatal(e.Start(":8000"))
@@ -137,4 +138,5 @@
137
138
 
138
139
  return nil
139
140
  }
141
+
140
142
  ```
GoHTTPReact.js

2

現状のコードを追記

2022/06/11 06:15

投稿

mimi_129
mimi_129

スコア63

test CHANGED
File without changes
test CHANGED
@@ -19,6 +19,10 @@
19
19
 
20
20
  <<追記>>
21
21
  ```App.js
22
+ import React from 'react';
23
+ import axios from 'axios';
24
+ import imgLogo from './images/logo.png';
25
+ import './css/style.css'
22
26
 
23
27
  class App extends React.Component {
24
28
 
@@ -26,65 +30,111 @@
26
30
 
27
31
  super();
28
32
 
29
- this.longMethod();
33
+ this.state = {
30
34
 
31
- setInterval(this.sendRequest(), 1000)
35
+ }
32
36
  }
33
37
 
34
- sendRequest = async() => {
38
+ interval = async() => {
35
39
 
36
- axios.get('/api/situation)
40
+ console.log("interval start")
37
- .then((response) => {
38
41
 
39
- console.log(‘now is ’ + response.data)
42
+ let res = await fetch("/api/progress");
40
- })
41
- .catch(console.error);
43
+ let data = await res.json();
44
+ let progress = document.getElementById("progress");
45
+ progress.value = data.progress;
46
+ progress.innerHTML = data.progress + "%";
42
47
  }
43
48
 
44
- longMethod = () => {
49
+ start = async() => {
45
50
 
46
- axios.get(‘/longMethod’)
51
+ console.log("start start")
47
- .then((response) => {
48
52
 
53
+ let progress = document.getElementById("progress");
54
+ progress.value = 0;
55
+ progress.innerHTML = "0%";
49
- this.setState({hoge: response.data})
56
+ let id = setInterval(this.interval(), 1000);
50
- })
57
+ await fetch("/api/longtask");
51
- .catch(console.error);
58
+ clearInterval(id);
59
+ window.alert("long task completed");
52
60
  }
61
+
62
+ render() {
63
+ return (
64
+
65
+ <div>
66
+ <div className="container">
67
+ <button id="start" onClick={async () => {await this.start();} }>start</button>
68
+ <progress id="progress" max="100" value="0">0%</progress>
69
+ </div>
70
+ </div>
71
+ )
72
+ }
73
+ }
74
+
75
+ export default App;
53
76
  ```
54
77
 
55
78
  ```handler.go
79
+ package handler
80
+
81
+ import (
82
+ // "encoding/json"
83
+ "fmt"
84
+ "net/http"
85
+ "sync"
86
+ "time"
87
+
88
+ _ "github.com/jinzhu/gorm/dialects/postgres"
89
+ _ "github.com/lib/pq"
90
+
91
+ "github.com/labstack/echo/v4"
92
+ "github.com/labstack/echo/v4/middleware"
93
+ )
94
+
95
+ type Progress struct {
96
+ sync.RWMutex
56
- var situationTime = "0%"
97
+ Progress int `json:"progress"`
98
+ }
57
99
 
58
100
  func Handler() {
59
101
 
60
- e.GET("/situation", situation)
102
+ e := echo.New()
61
- e.GET("/longMethod", longMethod)
103
+ e.Use(middleware.CORS())
62
104
 
105
+ // ルーティング
106
+ e.GET("/progress", progress)
107
+
108
+ // local サーバー
63
109
  e.Logger.Fatal(e.Start(":8000"))
64
110
 
65
111
  return
66
112
  }
67
113
 
68
- func longMethod(c echo.Context) (err error) {
114
+ func progress(c echo.Context) (err error) {
69
115
 
70
- situationTime = “10%”
71
- situationTime = “20%”
72
- situationTime = “30%”
73
- situationTime = “40%”
74
- situationTime = “50%”
75
- situationTime = “60%”
76
- situationTime = “70%”
77
- situationTime = “80%”
78
- situationTime = “90%”
79
- situationTime = “100%”
116
+ progress := &Progress{}
80
117
 
118
+ fmt.Printf("progress start")
119
+
120
+ progress.RLock()
81
- c.JSON(http.StatusOK, “finish”)
121
+ c.JSON(http.StatusOK, progress)
122
+ progress.RUnlock()
82
123
 
83
124
  return
84
125
  }
85
126
 
86
- func situation(c echo.Context) (err error) {
127
+ func longtask(c echo.Context) error {
87
128
 
129
+ progress := &Progress{}
130
+
88
- return c.JSON(http.StatusOK, situationTime)
131
+ for i := 0; i <= 10; i++ {
132
+ progress.Lock()
133
+ progress.Progress = i * 10
134
+ progress.Unlock()
135
+ time.Sleep(time.Second)
136
+ }
137
+
138
+ return nil
89
139
  }
90
140
  ```
GoHTTPReact.js

1

追記

2022/05/28 07:48

投稿

mimi_129
mimi_129

スコア63

test CHANGED
File without changes
test CHANGED
@@ -16,3 +16,75 @@
16
16
  バックエンドがGoです。
17
17
 
18
18
  色々と初歩的な質問ですいません。
19
+
20
+ <<追記>>
21
+ ```App.js
22
+
23
+ class App extends React.Component {
24
+
25
+ constructor() {
26
+
27
+ super();
28
+
29
+ this.longMethod();
30
+
31
+ setInterval(this.sendRequest(), 1000)
32
+ }
33
+
34
+ sendRequest = async() => {
35
+
36
+ axios.get('/api/situation)
37
+ .then((response) => {
38
+
39
+ console.log(‘now is ’ + response.data)
40
+ })
41
+ .catch(console.error);
42
+ }
43
+
44
+ longMethod = () => {
45
+
46
+ axios.get(‘/longMethod’)
47
+ .then((response) => {
48
+
49
+ this.setState({hoge: response.data})
50
+ })
51
+ .catch(console.error);
52
+ }
53
+ ```
54
+
55
+ ```handler.go
56
+ var situationTime = "0%"
57
+
58
+ func Handler() {
59
+
60
+ e.GET("/situation", situation)
61
+ e.GET("/longMethod", longMethod)
62
+
63
+ e.Logger.Fatal(e.Start(":8000"))
64
+
65
+ return
66
+ }
67
+
68
+ func longMethod(c echo.Context) (err error) {
69
+
70
+ situationTime = “10%”
71
+ situationTime = “20%”
72
+ situationTime = “30%”
73
+ situationTime = “40%”
74
+ situationTime = “50%”
75
+ situationTime = “60%”
76
+ situationTime = “70%”
77
+ situationTime = “80%”
78
+ situationTime = “90%”
79
+ situationTime = “100%”
80
+
81
+ c.JSON(http.StatusOK, “finish”)
82
+
83
+ return
84
+ }
85
+
86
+ func situation(c echo.Context) (err error) {
87
+
88
+ return c.JSON(http.StatusOK, situationTime)
89
+ }
90
+ ```
GoHTTPReact.js