###### tags: `WebSocket` `client` `javascript`

# Socket通信について #1
TCP/IP通信プロトコルをプログラム世界から使うための入り口のこと



参考
https://qiita.com/megadreams14/items/32a3eed4661e55419e1c

# ライフサイクル
## ライフサイクル
- create : ソケット作成
- bind, listen : ipアドレス、ポート指定、受付
- accept : 接続の受付(データではなく、クライアントからの接続の受理)
- close : 切断

## クライアント側
- create : ソケット作成
- bind : ipアドレス、ポート指定
- connect : 接続
- close : 切断

---

# Websocket クライアント API
javascriptの WebSocketオブジェクトにより作成される

const socket = new WebSocket("ws://localhost:5000")

いわゆる、Database の Connectionオブジェクト
## メソッド
2つだけ。シンプル。
能動的に実行できるのは send(データの送信) と close(切断)だけ

クライアントはサーバーへの送信しかできず、他のクライアントへのブロードキャストは
サーバーの役割

socket.send("string")
socket.close()

send() : データを送信
- string
- オブジェクトを送信するには、 JSON.stringify(obj)
- ArrayBuffer : 固定長バイナリデータ
- Blob : ファイルに似たオブジェクト
- size
- type : MIMEタイプ

close() : 接続を閉じる

## イベントハンドラーのプロパティ

プロパティに関数を代入しておくことで、
そのイベントが起こったときに実行する。
- onconnect
- onclose
- onerror
- onmessage

受信の処理はここで実行する。

- evet.data
送られてくるメッセージ。
utf8文字列ならそのまま使える。

socket.onconnect = () =>{
    console.log("connected")
}
socket.onclose = () => {
    console.log("closed")
}
socket.onerror = (event) => {
    console.log(event.data)
}
 
socket.onmessage = (event) =>{
    console.log(event.data)
}

### その他、設定値やステータス

// wsサーバーの絶対URL
socket.url
// 現在の接続状態。int型
socket.redyState
// 使っているプロトコル(string)
socket.protcols
// "blob", "arraybuffer", "その他"
socket.binaryType
// サーバーが使っている拡張機能
socket.extensions

- .redyState : 現在の接続状態。int型
- 0 : CONNECTING, 接続中
- 1 : OPEN, 接続がいつでもできる状態
- 2 : CLOSING, 終了プロセスの最中
- 3 : CLOSED, 終了した状態
- .protcols : 使っているプロトコル
- .bynaryType
- DOMString
- "blob"
- "arraybuffer"
- .extensions : サーバーによって定義された拡張機能(文字列)

# まとめ
ソケット通信とは
- ソケット : TCP/IPプロトコルをプログラムで使うため、ポートとプログラムをつなぐもの
- ソケット通信ができると、TCP/IPの低レベルを操作できる
- リアルタイム通信ができる
- HTTPも内部的にソケット通信を使っている

クライアント側は、
- サーバー単体への送信
- サーバーからの受信
しかできない。

以下の領域は、サーバーAPIが実装する。
- チャンネル
- ブロードキャスト(全クライアントへの送信)

#2 サーバー編へ続く