iT邦幫忙

0

socket 是什麼概念阿...

  • 分享至 

  • xImage

大佬們請教一下

只有寫過幾個月的的前端經驗

之前都是用VUE把資料從前台透過API餵給後端 不然就是設時間透過API跟後端要資料

實在不知道socket是怎樣的運作原理

因為我想寫一個即時的聊天室 像Messager 那樣子1對1的小功能

看了下面文章
https://blog.gtwang.org/programming/socket-io-node-js-realtime-app/

只有得出一個感覺是用NodeJs 寫成API 然後透過socket.io 吐給前端嗎?

但還是搞不太懂前台要怎麼知道伺服器吐東西給我啊(如果聊天室對方發訊息寫進資料庫再傳給我) 我又沒有伸手去拿?XD

看更多先前的討論...收起先前的討論...
froce iT邦大師 1 級 ‧ 2020-10-05 07:56:43 檢舉
1.你說的是websocket不是socket,這兩種技術不完全一樣。
2.相同的點是這兩種都是長連接,不像HTTP 一樣吐完資料就斷掉連接,所以可以做到不斷吐資料給雙方。
3.依照這種特性我們可以輕易的做到聊天室或其他即時應用(像push message給使用者)
fillano iT邦超人 1 級 ‧ 2020-10-05 09:59:06 檢舉
https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/message_event

伺服器送資料,瀏覽器會觸發這個事件,所以你知道你收到資料了。html5制訂的幾種communication相關規格,都有這個事件。
謝謝二位大佬 那我大概知道方向了
bizpro iT邦大師 1 級 ‧ 2020-10-05 22:10:26 檢舉
Websocket是以半雙工HTTP協定進行TCP握手後, 脫離HTTP升級到全雙工Websocket協定, 建立模擬socket連線. 客戶端不限於瀏覽器.

socket.io是nodejs的Javascript套件, 以半雙工HTTP協定進行TCP握手後建立HTTP連線, 發出三個xhr請求(也就是JQuery的AJAX), 如果瀏覽器支援Websocket, 則升級到Websocket協定建立全雙工的Websocket連線, 如果瀏覽器不支援Websocket, 就不會升級.
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

11
㊣浩瀚星空㊣
iT邦大神 1 級 ‧ 2020-10-05 10:00:52
最佳解答

我用比較情境式的說法。

一般你知道的api。
就像你在丟石頭給對方。對方會依照你給的石頭大小,痛的程度,再丟給你更大的石頭或是拳頭。

而 websocket 則是你丟了一條像皮筋給對方。對方接受了就會綁在他的身上陪你玩。
你可以轉身不需要理他。反正他有事就會拉你或是彈你。你就知道了。
等到他覺得你很無趣,或是你覺得他很煩了。就會放開了。

看更多先前的回應...收起先前的回應...
qwer2561 iT邦研究生 5 級 ‧ 2020-10-05 10:15:20 檢舉

精闢的比喻!!

=..= 這感覺是大師級的領悟

你是不是在想壞壞的事

Ginochang iT邦新手 5 級 ‧ 2020-10-06 18:18:20 檢舉

阿展展展 靠夭被你逗笑了...

utap2001 iT邦新手 5 級 ‧ 2020-10-06 19:02:55 檢舉

看完大師開示之後好像領悟了,真正會教的老師應該是要用白話文讓人了解,所以我很怕碰到一直講術語的人
之前學物件跟類別也是搞好久,後來真的碰到會教的老師才學會
我沒有開發過socket相關的套件,不過如果以我的推測,api應該是像提供函式或接口,socket就像功能更廣泛的ajax,一種前後端溝通,或是window到web傳送資料的一種界面

真是奇妙XD

「socket就像功能更廣泛的ajax」
這一句話的理解是錯誤的。

因為ajax跟丟石頭一樣。打完就得跑了。
如果打完不跑的話,那就會很要命了。

「window到web傳送資料的一種界面」這句話更是覺得怪怪的。
老實說,網頁 server 相關都不會跟系統有直接關係。
(間接關係的以後再討論)

如果真要我比喻「websocket」「websocket」「websocket」(很重要要說三次)
好像沒啥適合的比喻了。硬要說就當成是「長連接」吧。

glj8989332 iT邦研究生 4 級 ‧ 2020-10-08 09:14:06 檢舉

感謝大大的比喻, 煥然一新XD

我要發表回答

立即登入回答