-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtest.html
157 lines (127 loc) · 6.31 KB
/
test.html
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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html>
<header>
<meta charset="UTF-8">
<title>Teste do Servidor http/c++</title>
<!-- import bootstrap -->
<link rel="stylesheet" href="./src/bootstrap.min.css">
</header>
<body>
<div class="container-fluid">
<h1>Teste do servidor http escrito em c++</h1>
<hr>
<div class="row">
<div class="col-4">
<h2>Informações</h2>
<p>
Está página testa o seu servidor. Basta digitar a porta onde o servidor está rodando, selecionar o endereço e o
método que você deseja. Caso o método seja POST, você pode enviar uma mensagem para o servidor. A resposta será
exibida no quadro mais a direita.
</p>
<h3>Sobre o Servidor</h3>
<hr>
<p>
Código : <a href="https://github.com/LBBassani/http-cpp-server-base" target="_blank">https://github.com/LBBassani/http-cpp-server-base</a><br>
Autor : Lorena Bassani<br>
Data : 2020/07<br>
</p>
<h3>Instruções</h3>
<hr>
<p>
O servidor roda em SO Linux. Ele pode ser baixado pelo repositório github acima e compilado com o comando make.<br>
Para rodar o servidor o comando é :
<spam class="card" ><spam class="card-body">./bin/erushttpserver porta(=30000)</spam></spam>
</p>
</div>
<div class="col-4">
<h2>Parâmetros do teste</h2>
<div class="card">
<div class="card-body">
<!-- input da porta -->
<div class="form-group">
<label for="porta">Porta : </label>
<input class="form-control" pattern="\d*" id="porta" type="text" value="30000">
</div>
<!-- input do endereço -->
<label>Endereço : </label>
<div class="form-group">
<div class="form-check form-check-inline">
<input class="form-check-input" id="hello" name="enderecoRadio" value="/hello" type="radio" checked>
<label class="form-check-label" for="hello">/hello</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" id="bye" name="enderecoRadio" value="/bye" type="radio">
<label class="form-check-label" for="bye">/bye</label>
</div>
</div>
<!-- input do metodo -->
<label>Método : </label>
<div class="form-group">
<div class="form-check form-check-inline">
<input class="form-check-input" id="get" name="metodoRadio" value="GET" type="radio" checked>
<label class="form-check-label" for="get">GET</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" id="post" name="metodoRadio" value="POST" type="radio">
<label class="form-check-label" for="post">POST</label>
</div>
</div>
<!-- input da mensagem -->
<div class="form-group">
<label for="mensagem">Mensagem :</label>
<textarea disabled class="form-control" id="mensagem" type="text" rows="5" ></textarea>
<small class="text-muted">Usado apenas no método POST</small>
</div>
<!-- botão de envio -->
<div class="form-group">
<button id="enviar" class="btn btn-primary btn-block">Enviar</button>
</div>
</div>
</div>
</div>
<div class="col-4">
<h2>Resultado do teste</h2>
<div class="card">
<div class="card-body">
<iframe id="resposta" srcdoc="<p>Resposta do teste</p>" title="Resposta do teste" width="100%" height="100%" style="border:none;"></iframe>
</div>
</div>
</div>
</div>
</div>
<!-- import sweetalert -->
<script src="src/sweetalert2.all.min.js"></script>
<!-- scripts gerais -->
<script>
document.addEventListener("DOMContentLoaded",
function(){
document.querySelector("#enviar").addEventListener("click", obterDados)
document.querySelector("#post").addEventListener("change", habilitaMensagem)
document.querySelector("#get").addEventListener("change", habilitaMensagem)
},
false)
function habilitaMensagem() {
if (document.querySelector("#post").checked){
document.querySelector("#mensagem").disabled = false
}else{
document.querySelector("#mensagem").disabled = true
}
}
function obterDados() {
let porta = document.querySelector("#porta").value
let endereco = document.querySelector("input[name='enderecoRadio']:checked").value
let metodo = document.querySelector("input[name='metodoRadio']:checked").value
console.log(metodo)
let mensagem = (metodo == "POST") ? document.querySelector("#mensagem").value : null
console.log(mensagem)
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
document.querySelector("#resposta").srcdoc = (xmlHttp.responseText);
}
xmlHttp.open(metodo, "http://localhost:" + porta + endereco, true); // true for asynchronous
xmlHttp.send(mensagem)
}
</script>
</body>
</html>