フロントエンドが WebSocket にトークンを追加します

背景：

開発者の皆さんは、API を介して WebSocket のリクエスト ヘッダーを変更したり変更しようとしたりしたことがあると思います。

バックエンドの同僚の中には、フロントエンドができることはリクエスト ヘッダーでの承認であることを期待している人もいます: トークン

注: JavaScript WebSocket API にはリクエスト ヘッダーを変更する方法はありません。

別の方法を見つけなければなりません

解決策1 :リクエスト アドレスにパラメータが含まれています

const ws =  new WebSocket(`${location.protocol === 'https:' ? 'wss' : 'ws'}://${url}?${token}/websocket`)

解決策 2:データを送信する

const  ws = new WebSocket(`${location.protocol === 'https:' ? 'wss' : 'ws'}:${url}/websocket`)
ws.onopen=()=>{ws.send(token)}

解決策 3: Sec-WebSocket-Protocol を使用してトークンを渡す

const url = `${location.protocol === 'https:' ? 'wss' : 'ws'}://${url}/websocket`
const token = localStorage.getItem('token')
const ws = new WebSocket(url, [token])

このようなエラーが発生した場合

ws.ts:68 キャッチされません (約束内) DOMException: 'WebSocket' の構築に失敗しました: サブプロトコル '"Token"' が無効です。

トークンを処理してください 

const ws = new WebSocket(url, [JSON.parse(token)])

注: トークン応答は、バックエンドが応答するときにも必要です

もちろん、ヘッダーに渡す必要がある他のパラメーターがある場合は、次のようにすることもできます。

const ws = new WebSocket(url, ['v10.stomp', 'v11.stomp', token])

余談: バックエンドがリクエスト ヘッダーでのトークンのマウントを承認する必要があることを強調する場合は、それは実行できないことをバックエンドに伝えてください。