AppSyncのサブスクライブをnative WebSocketでやる
WebSocket AppSync This article is about how to subscribe to AppSync using native WebSocket. The author provides a script and explains the steps involved in detail.
by JanitorSep 29, 2023
AppSyncのサブスクライブは通常aws-amplifyをインストールして実施するかと思いますがWebSocketで実施してみます。
AppSyncのサブスクライブは通常aws-amplifyをインストールして実施するかと思いますがWebSocketで実施してみます。
Jump Links
1. スクリプトを書く
2. realtimeEndpointの確認
おわりに
1. スクリプトを書く
1. スクリプトを書く
下記のスクリプトで動作を確認することができます。今回はAPIKeyを使っています。Cognitoの認証を使う場合は、「x-api-key」を「Authorization」に変更し、apiKeyの代わりに、IdTokenを設定します。今回使用するAppSyncは下記URLの記事で作成したもので、idとdataのみのシンプルなものです。
https://comytom.com/anarticle/c8e1890a-f724-40be-a820-28601c1eb2ec
下記のスクリプトで動作を確認することができます。今回はAPIKeyを使っています。Cognitoの認証を使う場合は、「x-api-key」を「Authorization」に変更し、apiKeyの代わりに、IdTokenを設定します。今回使用するAppSyncは下記URLの記事で作成したもので、idとdataのみのシンプルなものです。
https://comytom.com/anarticle/c8e1890a-f724-40be-a820-28601c1eb2ec
var host = "xxxxxxxxxxxxxx.appsync-api.リージョン名.amazonaws.com";
var realtimeEndpoint = "wss://xxxxxxxxxxxxxx.appsync-realtime-api.リージョン名.amazonaws.com/graphql";
var apiKey = APIキー;
var header = { host: host, "x-api-key": apiKey }; // Cognitoの認証を使う場合は、Authorization: IdToken
var url = realtimeEndpoint + "?header=" + btoa( JSON.stringify( header ) ) + "&payload=" + btoa( JSON.stringify( {} ) );
var socket = new WebSocket( url, [ 'graphql-ws' ] );
var subscId = "abcdefg";
setTimeout( () => {
socket.send( JSON.stringify( { "type": "stop", "id": subscId } ) );
}, 60000 );
socket.addEventListener( "open", ( event ) => {
socket.send( JSON.stringify( { "type": "connection_init" } ) );
} );
socket.addEventListener( "message", ( event ) => {
var eventDataJson = JSON.parse( event.data );
if( eventDataJson.type == "connection_ack" ) socket.send( getSubscRegistMessage( subscId ) );
else if( eventDataJson.type == "data" ) console.log( "Message from server ", eventDataJson );
else if( eventDataJson.type == "complete" ) console.log( "subscription done." );
} );
// Cognitoの認証を使う場合は、Authorization: IdToken
function getSubscRegistMessage( subscId ){
return JSON.stringify( {
id: subscId,
payload: {
data: JSON.stringify( { query: getQuery(), variables: {} } ),
extensions: {
authorization: {
"x-api-key": apiKey,
host: host
}
}
},
type: "start"
} );
}
function getQuery(){
return `subscription MySubscription{
onCreateExistingTable{
data id
}
}`;
}
var host = "xxxxxxxxxxxxxx.appsync-api.リージョン名.amazonaws.com";
var realtimeEndpoint = "wss://xxxxxxxxxxxxxx.appsync-realtime-api.リージョン名.amazonaws.com/graphql";
var apiKey = APIキー;
var header = { host: host, "x-api-key": apiKey }; // Cognitoの認証を使う場合は、Authorization: IdToken
var url = realtimeEndpoint + "?header=" + btoa( JSON.stringify( header ) ) + "&payload=" + btoa( JSON.stringify( {} ) );
var socket = new WebSocket( url, [ 'graphql-ws' ] );
var subscId = "abcdefg";
setTimeout( () => {
socket.send( JSON.stringify( { "type": "stop", "id": subscId } ) );
}, 60000 );
socket.addEventListener( "open", ( event ) => {
socket.send( JSON.stringify( { "type": "connection_init" } ) );
} );
socket.addEventListener( "message", ( event ) => {
var eventDataJson = JSON.parse( event.data );
if( eventDataJson.type == "connection_ack" ) socket.send( getSubscRegistMessage( subscId ) );
else if( eventDataJson.type == "data" ) console.log( "Message from server ", eventDataJson );
else if( eventDataJson.type == "complete" ) console.log( "subscription done." );
} );
// Cognitoの認証を使う場合は、Authorization: IdToken
function getSubscRegistMessage( subscId ){
return JSON.stringify( {
id: subscId,
payload: {
data: JSON.stringify( { query: getQuery(), variables: {} } ),
extensions: {
authorization: {
"x-api-key": apiKey,
host: host
}
}
},
type: "start"
} );
}
function getQuery(){
return `subscription MySubscription{
onCreateExistingTable{
data id
}
}`;
}
やっていることは下記の通りです。
1. headerに情報を詰めて、realtimeEndpointとconnectionを張る準備
2. connectionがopenになったら「{ "type": "connection_init" }」をWebSocketで送信
3. サーバから「connection_ack」が返ってきたらサブスクリプション登録メッセージに情報を詰めて、WebSocketで送信
4. サーバから「data」が来たらコンソールに出力
5. １分経ったらconnectionをclose
サブスクライブID（上のスクリプト上ではsubscId）を「abcdefg」としていますが、一意に定まるのであればなんでもよくて、uuidなどをインストールしておけばよいかと思います。
参考にさせて頂いたウェブサイトURL
https://docs.aws.amazon.com/ja_jp/appsync/latest/devguide/real-time-websocket-client.html
https://stackoverflow.com/questions/74293606/websocket-with-appsync-error-unsupportedoperation-unknown-not-supported-throug
https://developer.mozilla.org/en-US/docs/Web/API/WebSocket
やっていることは下記の通りです。
1. headerに情報を詰めて、realtimeEndpointとconnectionを張る準備
2. connectionがopenになったら「{ "type": "connection_init" }」をWebSocketで送信
3. サーバから「connection_ack」が返ってきたらサブスクリプション登録メッセージに情報を詰めて、WebSocketで送信
4. サーバから「data」が来たらコンソールに出力
5. １分経ったらconnectionをclose
サブスクライブID（上のスクリプト上ではsubscId）を「abcdefg」としていますが、一意に定まるのであればなんでもよくて、uuidなどをインストールしておけばよいかと思います。
参考にさせて頂いたウェブサイトURL
https://docs.aws.amazon.com/ja_jp/appsync/latest/devguide/real-time-websocket-client.html
https://stackoverflow.com/questions/74293606/websocket-with-appsync-error-unsupportedoperation-unknown-not-supported-throug
https://developer.mozilla.org/en-US/docs/Web/API/WebSocket
2. realtimeEndpointの確認
2. realtimeEndpointの確認
下の画像のように、AppSyncのコンソール -> 該当のAppSync -> 設定 -> リアルタイムエンドポイントから確認できます。
hostはリアルタイムエンドポイントから先頭の「wss://」と、中間の「realtime-」と、末尾の「/graphql」を除いたものです。
下の画像のように、AppSyncのコンソール -> 該当のAppSync -> 設定 -> リアルタイムエンドポイントから確認できます。
hostはリアルタイムエンドポイントから先頭の「wss://」と、中間の「realtime-」と、末尾の「/graphql」を除いたものです。
おわりに
おわりに
とても複雑なのだろうなと思っていましたが意外にシンプルにできました。
とても複雑なのだろうなと思っていましたが意外にシンプルにできました。
Editors pick
Our other articles
AppSyncのサブスクライブをnative WebSocketでやる
WebSocket AppSync This article is about how to subscribe to AppSync using native WebSocket. The author provides a script and explains the steps involved in detail.
by JanitorSep 29, 2023
AppSyncのサブスクライブは通常aws-amplifyをインストールして実施するかと思いますがWebSocketで実施してみます。
AppSyncのサブスクライブは通常aws-amplifyをインストールして実施するかと思いますがWebSocketで実施してみます。
Jump Links
1. スクリプトを書く
2. realtimeEndpointの確認
おわりに
1. スクリプトを書く
1. スクリプトを書く
下記のスクリプトで動作を確認することができます。今回はAPIKeyを使っています。Cognitoの認証を使う場合は、「x-api-key」を「Authorization」に変更し、apiKeyの代わりに、IdTokenを設定します。今回使用するAppSyncは下記URLの記事で作成したもので、idとdataのみのシンプルなものです。
https://comytom.com/anarticle/c8e1890a-f724-40be-a820-28601c1eb2ec
下記のスクリプトで動作を確認することができます。今回はAPIKeyを使っています。Cognitoの認証を使う場合は、「x-api-key」を「Authorization」に変更し、apiKeyの代わりに、IdTokenを設定します。今回使用するAppSyncは下記URLの記事で作成したもので、idとdataのみのシンプルなものです。
https://comytom.com/anarticle/c8e1890a-f724-40be-a820-28601c1eb2ec
var host = "xxxxxxxxxxxxxx.appsync-api.リージョン名.amazonaws.com";
var realtimeEndpoint = "wss://xxxxxxxxxxxxxx.appsync-realtime-api.リージョン名.amazonaws.com/graphql";
var apiKey = APIキー;
var header = { host: host, "x-api-key": apiKey }; // Cognitoの認証を使う場合は、Authorization: IdToken
var url = realtimeEndpoint + "?header=" + btoa( JSON.stringify( header ) ) + "&payload=" + btoa( JSON.stringify( {} ) );
var socket = new WebSocket( url, [ 'graphql-ws' ] );
var subscId = "abcdefg";
setTimeout( () => {
socket.send( JSON.stringify( { "type": "stop", "id": subscId } ) );
}, 60000 );
socket.addEventListener( "open", ( event ) => {
socket.send( JSON.stringify( { "type": "connection_init" } ) );
} );
socket.addEventListener( "message", ( event ) => {
var eventDataJson = JSON.parse( event.data );
if( eventDataJson.type == "connection_ack" ) socket.send( getSubscRegistMessage( subscId ) );
else if( eventDataJson.type == "data" ) console.log( "Message from server ", eventDataJson );
else if( eventDataJson.type == "complete" ) console.log( "subscription done." );
} );
// Cognitoの認証を使う場合は、Authorization: IdToken
function getSubscRegistMessage( subscId ){
return JSON.stringify( {
id: subscId,
payload: {
data: JSON.stringify( { query: getQuery(), variables: {} } ),
extensions: {
authorization: {
"x-api-key": apiKey,
host: host
}
}
},
type: "start"
} );
}
function getQuery(){
return `subscription MySubscription{
onCreateExistingTable{
data id
}
}`;
}
var host = "xxxxxxxxxxxxxx.appsync-api.リージョン名.amazonaws.com";
var realtimeEndpoint = "wss://xxxxxxxxxxxxxx.appsync-realtime-api.リージョン名.amazonaws.com/graphql";
var apiKey = APIキー;
var header = { host: host, "x-api-key": apiKey }; // Cognitoの認証を使う場合は、Authorization: IdToken
var url = realtimeEndpoint + "?header=" + btoa( JSON.stringify( header ) ) + "&payload=" + btoa( JSON.stringify( {} ) );
var socket = new WebSocket( url, [ 'graphql-ws' ] );
var subscId = "abcdefg";
setTimeout( () => {
socket.send( JSON.stringify( { "type": "stop", "id": subscId } ) );
}, 60000 );
socket.addEventListener( "open", ( event ) => {
socket.send( JSON.stringify( { "type": "connection_init" } ) );
} );
socket.addEventListener( "message", ( event ) => {
var eventDataJson = JSON.parse( event.data );
if( eventDataJson.type == "connection_ack" ) socket.send( getSubscRegistMessage( subscId ) );
else if( eventDataJson.type == "data" ) console.log( "Message from server ", eventDataJson );
else if( eventDataJson.type == "complete" ) console.log( "subscription done." );
} );
// Cognitoの認証を使う場合は、Authorization: IdToken
function getSubscRegistMessage( subscId ){
return JSON.stringify( {
id: subscId,
payload: {
data: JSON.stringify( { query: getQuery(), variables: {} } ),
extensions: {
authorization: {
"x-api-key": apiKey,
host: host
}
}
},
type: "start"
} );
}
function getQuery(){
return `subscription MySubscription{
onCreateExistingTable{
data id
}
}`;
}
やっていることは下記の通りです。
1. headerに情報を詰めて、realtimeEndpointとconnectionを張る準備
2. connectionがopenになったら「{ "type": "connection_init" }」をWebSocketで送信
3. サーバから「connection_ack」が返ってきたらサブスクリプション登録メッセージに情報を詰めて、WebSocketで送信
4. サーバから「data」が来たらコンソールに出力
5. １分経ったらconnectionをclose
サブスクライブID（上のスクリプト上ではsubscId）を「abcdefg」としていますが、一意に定まるのであればなんでもよくて、uuidなどをインストールしておけばよいかと思います。
参考にさせて頂いたウェブサイトURL
https://docs.aws.amazon.com/ja_jp/appsync/latest/devguide/real-time-websocket-client.html
https://stackoverflow.com/questions/74293606/websocket-with-appsync-error-unsupportedoperation-unknown-not-supported-throug
https://developer.mozilla.org/en-US/docs/Web/API/WebSocket
やっていることは下記の通りです。
1. headerに情報を詰めて、realtimeEndpointとconnectionを張る準備
2. connectionがopenになったら「{ "type": "connection_init" }」をWebSocketで送信
3. サーバから「connection_ack」が返ってきたらサブスクリプション登録メッセージに情報を詰めて、WebSocketで送信
4. サーバから「data」が来たらコンソールに出力
5. １分経ったらconnectionをclose
サブスクライブID（上のスクリプト上ではsubscId）を「abcdefg」としていますが、一意に定まるのであればなんでもよくて、uuidなどをインストールしておけばよいかと思います。
参考にさせて頂いたウェブサイトURL
https://docs.aws.amazon.com/ja_jp/appsync/latest/devguide/real-time-websocket-client.html
https://stackoverflow.com/questions/74293606/websocket-with-appsync-error-unsupportedoperation-unknown-not-supported-throug
https://developer.mozilla.org/en-US/docs/Web/API/WebSocket
2. realtimeEndpointの確認
2. realtimeEndpointの確認
下の画像のように、AppSyncのコンソール -> 該当のAppSync -> 設定 -> リアルタイムエンドポイントから確認できます。
hostはリアルタイムエンドポイントから先頭の「wss://」と、中間の「realtime-」と、末尾の「/graphql」を除いたものです。
下の画像のように、AppSyncのコンソール -> 該当のAppSync -> 設定 -> リアルタイムエンドポイントから確認できます。
hostはリアルタイムエンドポイントから先頭の「wss://」と、中間の「realtime-」と、末尾の「/graphql」を除いたものです。
おわりに
おわりに
とても複雑なのだろうなと思っていましたが意外にシンプルにできました。
とても複雑なのだろうなと思っていましたが意外にシンプルにできました。
Editors pick
Our other articles