Utilisation de WebSocket

**dmendi** · 15/05/2020, 11h42

Bonjour à tous,

Je viens ici après plusieurs recherches infructueuses. En effet j'utilise un WebSocket pour interroger mon serveur TCP qui n'est pas sécurisé avec un certificat SSL. Ce WebSocket est donc en WS et pas WSS mais mon serveur de développement est en HTTPS, je ne peux donc pas communiquer avec le serveur (voir erreur). J'ai vu sur Stack Overflow qu'il était impossible d’accéder à un WebSocket non sécurisé depuis une page web sécurisée. Ma question est donc la suivante, puis-je faire quelque chose pour forcer la connexion entre les deux malgré les problèmes de sécurité ? Existe-t-il une autre technologie que les WebSockets que je pourrais utiliser pour communiquer avec mon serveur TCP ? (Mon serveur TCP est pour l'instant un simple serveur qui prend ce qu'il reçoit et le renvoi)

Merci par avance !

Nom : 2020-05-15 11_37_10-#salle-de-reunion - Discord_censored.jpg
Affichages : 99
Taille : 31,8 Ko

Nom : 2020-05-15 11_37_10-#salle-de-reunion - Discord_censored.jpg
Affichages : 99
Taille : 31,8 Ko

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<!DOCTYPE html>
<html lang = "en">
 
   <head>
      <meta charset = utf-8>
      <title>HTML5 Chat</title>
 
      <body>
 
         <section id = "wrapper">
 
            <header>
               <h1>HTML5 Chat</h1>
            </header>
 
            <style>
               #chat { width: 97%; }
               .message { font-weight: bold; }
               .message:before { content: ' '; color: #bbb; font-size: 14px; }
                                        
               #log {
                  overflow: auto;
                  max-height: 300px;
                  list-style: none;
                  padding: 0;
               }
                                        
               #log li {
                  border-top: 1px solid #ccc;
                  margin: 0;
                  padding: 10px 0;
               }
                                        
               body {
                  font: normal 16px/20px "Helvetica Neue", Helvetica, sans-serif;
                  background: rgb(237, 237, 236);
                  margin: 0;
                  margin-top: 40px;
                  padding: 0;
               }
                                        
               section, header {
                  display: block;
               }
                                        
               #wrapper {
                  width: 600px;
                  margin: 0 auto;
                  background: #fff;
                  border-radius: 10px;
                  border-top: 1px solid #fff;
                  padding-bottom: 16px;
               }
                                        
               h1 {
                  padding-top: 10px;
               }
                                        
               h2 {
                  font-size: 100%;
                  font-style: italic;
               }
                                        
               header, article > * {
                  margin: 20px;
               }
                                        
               #status {
                  padding: 5px;
                  color: #fff;
                  background: #ccc;
               }
                                        
               #status.fail {
                  background: #c00;
               }
                                        
               #status.success {
                  background: #0c0;
               }
                                        
               #status.offline {
                  background: #c00;
               }
                                        
               #status.online {
                  background: #0c0;
               }
                                        
               #html5badge {
                  margin-left: -30px;
                  border: 0;
               }
                                        
               #html5badge img {
                  border: 0;
               }
            </style>
 
            <article>
 
               <form onsubmit = "addMessage(); return false;">
                  <input type = "text" id = "chat" placeholder = "type and press enter to chat" />
               </form>
 
               <p id = "status">Not connected</p>
               <p>Users connected: <span id = "connected">0
                  </span></p>
               <ul id = "log"></ul>
 
            </article>
 
            <script>
               connected = document.getElementById("connected");
               log = document.getElementById("log");
               chat = document.getElementById("chat");
               form = chat.form;
               state = document.getElementById("status");
                                        
               if (window.WebSocket === undefined) {
                  state.innerHTML = "sockets not supported";
                  state.className = "fail";
               }else {
                  if (typeof String.prototype.startsWith != "function") {
                     String.prototype.startsWith = function (str) {
                        return this.indexOf(str) == 0;
                     };
                  }
                                                
                  window.addEventListener("load", onLoad, false);
               }
                                        
               function onLoad() {
                  var wsUri = "ws://blablabla:1111";
                  websocket = new WebSocket(wsUri);
                  websocket.onopen = function(evt) { onOpen(evt) };
                  websocket.onclose = function(evt) { onClose(evt) };
                  websocket.onmessage = function(evt) { onMessage(evt) };
                  websocket.onerror = function(evt) { onError(evt) };
               }
                                        
               function onOpen(evt) {
                  state.className = "success";
                  state.innerHTML = "Connected to server";
               }
                                        
               function onClose(evt) {
                  state.className = "fail";
                  state.innerHTML = "Not connected";
                  connected.innerHTML = "0";
               }
                                        
               function onMessage(evt) {
                  // There are two types of messages:
                  // 1. a chat participant message itself
                  // 2. a message with a number of connected chat participants
                  var message = evt.data;
                  alert(message);
                                                
                  if (message.startsWith("log:")) {
                     message = message.slice("log:".length);
                     log.innerHTML = '<li class = "message">' + 
                        message + "</li>" + log.innerHTML;
                  }else if (message.startsWith("connected:")) {
                     message = message.slice("connected:".length);
                     connected.innerHTML = message;
                  }
               }
                                        
               function onError(evt) {
                  state.className = "fail";
                  state.innerHTML = "Communication error";
               }
                                        
               function addMessage() {
                  var message = chat.value;
                  chat.value = "";
                  websocket.send(message);
               }
                                        
            </script>
 
         </section>
 
      </body>
 
   </head>	
 
</html>