---
tags: 前端工具
---

# [筆記] Websocket
## 簡介
- 網路協定的一種
- Client 可以透過此協定與 Server 做雙向溝通
- 和http/https不同: WebSocket協定只需透過一次連結便能保持連線，不必再透過一直發送 Request 來與Server互動
- event-driven responses

- url樣式

ws://example.com
//經過 SSL 加密後，前方的 ws 會變成 wss 
wss://example.com

#### 目的
- chat apps
- 即時資料分析
- 社群媒體

## 事件
- socket handshake
#### onopen
- 開啟後執行的動作，連結websocket後執行

#### onclose
- 連結中斷後執行

#### onmessage

//接收 Server 發送的訊息
ws.onmessage = event => {
  console.log(event.data)
}

#### send
- 傳送資料

ws.send('xxx')

#### error
- 連線失敗
---
- Interfaces

### WebSocket
The primary interface for connecting to a WebSocket server and then sending and receiving data on the connection.

### CloseEvent
The event sent by the WebSocket object when the connection closes.

### MessageEvent
The event sent by the WebSocket object when a message is received from the server.

### Vue websocket
- https://penueling.com/%E6%8A%80%E8%A1%93%E7%AD%86%E8%A8%98/vue-%E5%85%A8%E7%AB%99%E4%BD%BF%E7%94%A8-websocket-%E5%82%B3%E8%BC%B8%E8%B3%87%E6%96%99/
- https://ithelp.ithome.com.tw/articles/10270952?sc=iThelpR

##### websocket server 套件
- [ws](https://www.npmjs.com/package/ws)

### 文件參考
[文件參考MDN](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API)
[飯粒](https://medium.com/enjoy-life-enjoy-coding/javascript-websocket-%E8%AE%93%E5%89%8D%E5%BE%8C%E7%AB%AF%E6%B2%92%E6%9C%89%E8%B7%9D%E9%9B%A2-34536c333e1b)

const ws = new WebSocket('ws://localhost:3000')

//開啟後執行的動作，指定一個 function 會在連結 WebSocket 後執行
ws.onopen = () => {
  console.log('open connection')
}

//關閉後執行的動作，指定一個 function 會在連結中斷後執行
ws.onclose = () => {
  console.log('close connection')
}

//接收 Server 發送的訊息
ws.onmessage = event => {
  const reader = new FileReader()
  reader.addEventListener('loadend', function (e) {
    console.log(e.target.result)
  })
  reader.readAsText(event.data)
}

#### 其它
- [fileReader api文件](https://developer.mozilla.org/en-US/docs/Web/API/FileReader/onload)