{"id":7174,"date":"2021-04-28T15:26:23","date_gmt":"2021-04-28T13:26:23","guid":{"rendered":"http:\/\/www.unimedia.tech.mialias.net\/realtime-with-serverless-using-websocket-in-aws\/"},"modified":"2024-01-10T18:20:10","modified_gmt":"2024-01-10T17:20:10","slug":"realtime-with-serverless-using-websocket-in-aws","status":"publish","type":"post","link":"https:\/\/www.unimedia.tech\/ca\/realtime-with-serverless-using-websocket-in-aws\/","title":{"rendered":"Temps real sense servidor mitjan\u00e7ant Websocket a AWS"},"content":{"rendered":"\n

Hola a tots, Avui parlarem sobre la implementaci\u00f3 de websocket amb arquitectura sense servidor fent servir Node.js amb Typescript per a la comunicaci\u00f3 en temps real.<\/p>\n\n

<\/p>\n\n

Si proveu de cercar-lo a Internet, trobareu detalls d’implementaci\u00f3<\/a> , per\u00f2 no hi ha res concret disponible. Per tant, aqu\u00ed estic construint un ecosistema de websocket complet amb tots els detalls de codi i configuraci\u00f3.<\/p>\n\n

<\/p>\n\n

Per al desenvolupament<\/a> , cal tenirserverless<\/strong><\/code> ,npm<\/strong><\/code> i\/oyarn<\/strong><\/code> instal\u00b7lat globalment. Vegeu com instal\u00b7lar YARN<\/a> i NPM<\/a> . Tamb\u00e9 prefereixo utilitzar NVM<\/a> per gestionar les meves versions de Node.<\/p>\n\n

<\/p>\n\n

Desenvolupament<\/h2>\n\n

<\/p>\n\n

Pas 1. Configurar AWS<\/h3>\n\n

Configureu l’AWS CLI si encara no ho heu fet, aqu\u00ed hi ha un article molt bo sobre crear i configurar credencials d’AWS<\/a> . A continuaci\u00f3, hem de configurar la nostra aplicaci\u00f3.<\/p>\n\n

<\/p>\n\n

<\/p>\n\n

Pas 2. Projecte d’instal\u00b7laci\u00f3<\/h3>\n\n

Creeu i configureu un projecte sense servidor amb mecanografia:<\/p>\n\n

$ sls create --template aws-nodejs-typescript --path <PROJECT-NAME><\/code><\/pre>\n\n
On<PROJECT-NAME><\/strong><\/code> \u00e9s el nom del teu projecte.<\/p>\n\n
Aix\u00f2 genera un boilerplate sense servidor per a la nostra aplicaci\u00f3. A continuaci\u00f3, hem d’anar al nostre nou projectecd <PROJECT-NAME><\/code> i instal\u00b7leu les nostres depend\u00e8ncies executantyarn install<\/strong><\/code> .<\/p>\n\n
Els fitxers m\u00e9s importants que anirem actualitzant a mesura que desenvolupem la nostra aplicaci\u00f3 s\u00f3n elshandler.ts<\/strong><\/code> iserverless.ts<\/strong><\/code> . Elhandler.ts<\/strong><\/code> gestiona les nostres funcions lambda o refer\u00e8ncies a les nostres funcions lambda. Hauria de ser aix\u00ed:<\/p>\n\n
import { APIGatewayProxyHandler } from 'aws-lambda';\nimport 'source-map-support\/register';\n\nexport const hello: APIGatewayProxyHandler = async (event, _context) => {\n  return {\n    statusCode: 200,\n    body: JSON.stringify({\n      message: 'Go Serverless Webpack (Typescript) v1.0! Your function executed successfully!',\n      input: event,\n    }, null, 2),\n  };\n}<\/code><\/pre>\n\n
<\/p>\n\n
<\/p>\n\n
El fitxer serverless.ts ens proporciona una plantilla per modelar i subministrar els nostres recursos d’aplicaci\u00f3 per a AWS CloudFormation tractant la infraestructura com a codi. Aix\u00f2 ens ajuda a crear, actualitzar i fins i tot eliminar recursos f\u00e0cilment. Hauria de ser aix\u00ed:<\/p>\n\n
import type { Serverless } from 'serverless\/aws';\n\nconst serverlessConfiguration: Serverless = {\n  service: {\n    name: 'serverless-websocket-ts',\n    \/\/ app and org for use with dashboard.serverless.com\n    \/\/ app: your-app-name,\n    \/\/ org: your-org-name,\n  },\n  frameworkVersion: '>=1.72.0',\n  custom: {\n    webpack: {\n      webpackConfig: '.\/webpack.config.js',\n      includeModules: true\n    }\n  },\n  \/\/ Add the serverless-webpack plugin\n  plugins: ['serverless-webpack'],\n  provider: {\n    name: 'aws',\n    runtime: 'nodejs12.x',\n    apiGateway: {\n      minimumCompressionSize: 1024,\n    },\n    environment: {\n      AWS_NODEJS_CONNECTION_REUSE_ENABLED: '1',\n    },\n  },\n  functions: {\n    hello: {\n      handler: 'handler.hello',\n      events: [\n        {\n          http: {\n            method: 'get',\n            path: 'hello',\n          }\n        }\n      ]\n    }\n  }\n}\n\nmodule.exports = serverlessConfiguration;<\/code><\/pre>\n\n
<\/p>\n\n
A m\u00e9s, a causa de les obsolesc\u00e8ncies<\/a> , haureu d’establir la propietat del servei directament amb el nom del servei:<\/p>\n\n
{ \n  service: 'serverless-websocket-ts',\n  ...\n}<\/code><\/pre>\n\n
<\/p>\n\n
I actualitzeu elprovider.apiGateway<\/strong><\/code> objecte de la seg\u00fcent manera:<\/p>\n\n
provider: {
  ...
  apiGateway: {
    shouldStartNameWithService: true,
    ...
  },
  ...
},<\/code><\/pre>\n\n
Podem executar la nostra funci\u00f3 a l’arrel del nostre projecte$ serverless invoke local --function hello<\/strong><\/code> i haur\u00edeu de veure la resposta:<\/p>\n\n
{\n    \"statusCode\": 200,\n    \"body\": \"{n  \"message\": \"Go Serverless Webpack (Typescript) v1.0! Your function executed           successfully!\",n  \"input\": \"n}\"\n}<\/code><\/pre>\n\n
<\/p>\n\n
El marc sense servidor invoca localment elhello<\/code> funci\u00f3 i executa l’exportathello<\/strong><\/code> m\u00e8tode en elhandler.ts<\/strong><\/code> dossier. Elserverless invoke local<\/code> L’ordre ens permet executar les nostres funcions Lambda localment abans de desplegar-les.<\/p>\n\n
A continuaci\u00f3, hem d’instal\u00b7lar algunes depend\u00e8ncies per a la nostra aplicaci\u00f3:<\/p>\n\n
$ yarn add -D serverless-offline serverless-dotenv-plugin serverless-bundle
$ yarn add aws-sdk uuid @types\/uuid<\/code><\/pre>\n\n