結論、解決方法

GAEでwebsocket扱うにはstandard環境じゃなくてflexible環境である必要がある。 flexible環境からCloudSQLに繋ぐ時には若干設定の追加が必要。 api/app.yamlに以下のように設定変更した。

service: api
runtime: nodejs
env: flex
manual_scaling:
  instances: 1
network:
  session_affinity: true
beta_settings:
  cloud_sql_instances: pikopikopon1:us-central1:remollege-database

参考サイト

やっぱ公式Docs読むとなんでも解決するねぇ…🥺

エラー内容

a57acb5.js:2 WebSocket connection to 'wss://api-dot-pikopikopon1.uc.r.appspot.com/socket.io/?EIO=3&transport=websocket&sid=qZ7MlafvYsVudWCjAAAA' failed: Error during WebSocket handshake: Unexpected response code: 400

nuxt-socketの接続設定を明示的に設定してみる

stackoverflow https://stackoverflow.com/questions/41381444/websocket-connection-failed-error-during-websocket-handshake-unexpected-respon
socket.io公式docs https://socket.io/docs/client-api/ With websocket transport only

By default, a long-polling connection is established first, then upgraded to “better” transports (like WebSocket). If you like to live dangerously, this part can be skipped:

より、roomページにてtransportsを明示的にwebsocketに設定

this.socket = this.$nuxtSocket({ transports: ['websocket'] })

localのresponse headers

Accept-Encoding: gzip, deflate, br
Accept-Language: ja,en-US;q=0.9,en;q=0.8
Cache-Control: no-cache
Connection: Upgrade
Host: localhost:3000
Origin: http://localhost:3001
Pragma: no-cache
Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits
Sec-WebSocket-Key: YISWZTMD9EnRbAtGdXz1iw==
Sec-WebSocket-Version: 13
Upgrade: websocket
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.83 Safari/537.36

productionのresponse headers

Provisional headers are shown
Accept-Encoding: gzip, deflate, br
Accept-Language: ja,en-US;q=0.9,en;q=0.8
Cache-Control: no-cache
Connection: Upgrade
Host: api-dot-pikopikopon1.uc.r.appspot.com
Origin: https://pikopikopon1.uc.r.appspot.com
Pragma: no-cache
Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits
Sec-WebSocket-Key: i9Ljpjvjb/0v+H1YDjSPdQ==
Sec-WebSocket-Version: 13
Upgrade: websocket
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.83 Safari/537.36

GAEの設定がいけなそう🤔

GAEのwebsocketの箇所 https://cloud.google.com/appengine/docs/flexible/nodejs/using-websockets-and-session-affinity
GAEのwebsocketのサンプルリポジトリ https://github.com/GoogleCloudPlatform/nodejs-docs-samples/blob/master/appengine/websockets/app.yaml

より、こんな感じにやればいいぽいお

# [START appengine_websockets_yaml]
runtime: nodejs
env: flex

# Use only a single instance, so that this local-memory-only chat app will work
# consistently with multiple users. To work across multiple instances, an
# extra-instance messaging system or data store would be needed.
manual_scaling:
  instances: 1

network:
  session_affinity: true
# [END appengine_websockets_yaml]

502.....

再度原因究明

handshake時

General
Request URL: wss://api-dot-pikopikopon1.uc.r.appspot.com/socket.io/?EIO=3&transport=websocket&sid=hEHtzNv2Hp266AmUAAAJ

Request Headers
Provisional headers are shown
Accept-Encoding: gzip, deflate, br
Accept-Language: ja,en-US;q=0.9,en;q=0.8
Cache-Control: no-cache
Connection: Upgrade
Host: api-dot-pikopikopon1.uc.r.appspot.com
Origin: https://pikopikopon1.uc.r.appspot.com
Pragma: no-cache
Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits
Sec-WebSocket-Key: EzXoIkzmZjj5xY9hYFN+sw==
Sec-WebSocket-Version: 13
Upgrade: websocket
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.83 Safari/537.36

Query String Parameters
EIO: 3
transport: websocket
sid: hEHtzNv2Hp266AmUAAAJ

handshake後

General
Request URL: https://api-dot-pikopikopon1.uc.r.appspot.com/socket.io/?EIO=3&transport=polling&t=NJ6dmfm&sid=hEHtzNv2Hp266AmUAAAJ
Request Method: GET
Status Code: 200 
Remote Address: [2404:6800:4004:81c::2014]:443
Referrer Policy: no-referrer-when-downgrade

Resonse Headers
access-control-allow-credentials: true
access-control-allow-origin: https://pikopikopon1.uc.r.appspot.com
alt-svc: h3-Q050=":443"; ma=2592000,h3-29=":443"; ma=2592000,h3-27=":443"; ma=2592000,h3-T051=":443"; ma=2592000,h3-T050=":443"; ma=2592000,h3-Q046=":443"; ma=2592000,h3-Q043=":443"; ma=2592000,quic=":443"; ma=2592000; v="46,43"
cache-control: private
content-encoding: gzip
content-length: 243
content-type: text/plain; charset=UTF-8
date: Fri, 25 Sep 2020 18:55:48 GMT
expires: Fri, 25 Sep 2020 18:55:48 GMT
server: Google Frontend
set-cookie: io=hEHtzNv2Hp266AmUAAAJ; Path=/; HttpOnly; SameSite=Strict
status: 200
vary: Accept-Encoding
x-cloud-trace-context: e63c73740f3b47b3ee7c79a607f375a7

Request Headers
:authority: api-dot-pikopikopon1.uc.r.appspot.com
:method: GET
:path: /socket.io/?EIO=3&transport=polling&t=NJ6dmfm&sid=hEHtzNv2Hp266AmUAAAJ
:scheme: https
accept: */*
accept-encoding: gzip, deflate, br
accept-language: ja,en-US;q=0.9,en;q=0.8
origin: https://pikopikopon1.uc.r.appspot.com
referer: https://pikopikopon1.uc.r.appspot.com/rooms/1
sec-fetch-dest: empty
sec-fetch-mode: cors
sec-fetch-site: cross-site
user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.83 Safari/537.36

Query String Parameters
EIO: 3
transport: polling
t: NJ6dmfm
sid: hEHtzNv2Hp266AmUAAAJ

Piko-Piko-Pon-Taro / Remollege

websocket 本番環境でのhandshake時のエラー #201