Shikata Ga Nai

Private? There is no such things.

WebSocketの通信の流れについてかいてみた

Hello there, ('ω')ノ

 

HTMLとWebSocketの仕組みの違いは、イメージを検索して把握するとして。

 

f:id:ThisIsOne:20210202092106p:plain

 

ページに移動して。

 

f:id:ThisIsOne:20210201152001p:plain

 

Live chatのメニューへ。

 

f:id:ThisIsOne:20210202084426p:plain

 

履歴を見ると2つの/chatが。

はじめの/chatからは、ページのヘッダ部分を。

 

f:id:ThisIsOne:20210202084835p:plain

 

2つ目の/chatからは、Live chatの部分を。

 

f:id:ThisIsOne:20210202084904p:plain

 

WebSocketsの履歴をみると、READYから始まって。

 

f:id:ThisIsOne:20210202084926p:plain

 

ページのチャット部分に表示される内容がクライアントに渡されて。

 "content":"-- Now chatting with Hal Pline --"

 

f:id:ThisIsOne:20210202084951p:plain


たとえば、下記を入力して送信すると。
 aaa

 

f:id:ThisIsOne:20210202090050p:plain


HTTPの履歴は、変わらず。

 

f:id:ThisIsOne:20210202090027p:plain

 

WebSocketsを見ると、新たに入力されたデータが追加でサーバに送信されて。

 "aaa"

 

f:id:ThisIsOne:20210202090120p:plain

 

クライアントに追加で表示されるデータが送信されて。

 

f:id:ThisIsOne:20210202090218p:plain

 

f:id:ThisIsOne:20210202090243p:plain

 

最後のデータは、以下のとおりで。

 "Sorry, I didn't hear that, I was listening to someone more interesting than you."

 

f:id:ThisIsOne:20210202090152p:plain

 

さらに下記を入力して送信すると。

 bbb

 

f:id:ThisIsOne:20210202090309p:plain

 

HTTPの履歴は、変わらず。

 

f:id:ThisIsOne:20210202090331p:plain

 

WebSocketsを見ると、新たに入力されたデータが追加でサーバに送信されて。

 "bbb"

 

f:id:ThisIsOne:20210202090400p:plain

 

クライアントに追加で表示されるデータが送信されて。

 

f:id:ThisIsOne:20210202090425p:plain

 

最後のデータは、以下のとおりで。

 "Remember that power cut? Best time of my life"

 

f:id:ThisIsOne:20210202090457p:plain

 

Best regards, (^^ゞ