Building a WebSocket Chat service for Cloud Run tutorial

Stay organized with collections Save and categorize content based on your preferences.

Setting up gcloud defaults

To configure gcloud with defaults for your Cloud Run service:

1. Set your default project:

   gcloudconfigsetprojectPROJECT_ID

   Replace PROJECT_ID with the name of the project you created for this tutorial.

2. Configure gcloud for your chosen region:

   gcloudconfigsetrun/regionREGION

   Replace REGION with the supported Cloud Run region of your choice.

Retrieving the code sample

To retrieve the code sample for use:

1. Clone the sample repository to your local machine:

   Node.js

   gitclonehttps://github.com/GoogleCloudPlatform/nodejs-docs-samples.git

   Alternatively, you can download the sample as a zip file and extract it.

2. Change to the directory that contains the Cloud Run sample code:

   Node.js

   cdnodejs-docs-samples/run/websockets/

Understanding the code

Socket.io is a library that enables real time, bidirectional communication between the browser and server. Although Socket.io is not a WebSocket implementation, it does wrap the functionality to provide a simpler API for multiple communication protocols with additional features such as improved reliability, automatic reconnection, and broadcasting to all or a subset of clients.

Client-side integration

<script src="/socket.io/socket.io.js"></script>

The client instantiates a new Socket instance for every connection. Because this sample is server side rendered the server URL does not need to be defined. The socket instance can emit and listen to events.

// Initialize Socket.ioconstsocket=io('',{transports:['websocket'],});

// Emit "sendMessage" event with messagesocket.emit('sendMessage',msg,error=>{if(error){console.error(error);}else{// Clear message$('#msg').val('');}});

// Listen for new messagessocket.on('message',msg=>{log(msg.user,msg.text);});// Listen for notificationssocket.on('notification',msg=>{log(msg.title,msg.description);});// Listen connect eventsocket.on('connect',()=>{console.log('connected');});

Server-side integration

On the server side, the Socket.io server is initialized and attached to the HTTP server. Similar to the client side, once the Socket.io server makes a connection to the client, a socket instance is created for every connection which can be used to emit and listen to messages. Socket.io also provides an easy interface for creating "rooms" or an arbitrary channel that sockets can join and leave.

// Initialize Socket.ioconstserver=require('http').Server(app);constio=require('socket.io')(server);const{createAdapter}=require('@socket.io/redis-adapter');// Replace in-memory adapter with RedisconstsubClient=redisClient.duplicate();io.adapter(createAdapter(redisClient,subClient));// Add error handlersredisClient.on('error',err=>{console.error(err.message);});subClient.on('error',err=>{console.error(err.message);});// Listen for new connectionio.on('connection',socket=>{// Add listener for "signin" eventsocket.on('signin',async({user,room},callback)=>{try{// Record socket ID to user's name and chat roomaddUser(socket.id,user,room);// Call join to subscribe the socket to a given channelsocket.join(room);// Emit notification eventsocket.in(room).emit('notification',{title:"Someone's here",description:`${user} just entered the room`,});// Retrieve room's message history or return nullconstmessages=awaitgetRoomFromCache(room);// Use the callback to respond with the room's message history// Callbacks are more commonly used for event listeners than promisescallback(null,messages);}catch(err){callback(err,null);}});// Add listener for "updateSocketId" eventsocket.on('updateSocketId',async({user,room})=>{try{addUser(socket.id,user,room);socket.join(room);}catch(err){console.error(err);}});// Add listener for "sendMessage" eventsocket.on('sendMessage',(message,callback)=>{// Retrieve user's name and chat room from socket IDconst{user,room}=getUser(socket.id);if(room){constmsg={user,text:message};// Push message to clients in chat roomio.in(room).emit('message',msg);addMessageToCache(room,msg);callback();}else{callback('User session not found.');}});// Add listener for disconnectionsocket.on('disconnect',()=>{// Remove socket ID from listconst{user,room}=deleteUser(socket.id);if(user){io.in(room).emit('notification',{title:'Someone just left',description:`${user} just left the room`,});}});});

Socket.io also provides a Redis adapter to broadcast events to all clients regardless of which server is serving the socket. Socket.io only uses Redis's Pub/Sub mechanism and does not store any data.

const{createAdapter}=require('@socket.io/redis-adapter');// Replace in-memory adapter with RedisconstsubClient=redisClient.duplicate();io.adapter(createAdapter(redisClient,subClient));

Socket.io's Redis adapter can reuse the Redis client used to store the room's message history. Each container will create a connection to the Redis instance and Cloud Run can create a large number of instances. This is well under the 65,000 connections that Redis can support. If you need to support this amount of traffic, you also need to evaluate the throughput of the Serverless VPC Access connector.

Reconnection

Cloud Run has a maximum timeout of 60 minutes. So you need to add reconnection logic for possible timeouts. In some cases, Socket.io automatically attempts to reconnect after disconnection or connection error events. There is no guarantee that the client will reconnect to the same instance.

// Listen for reconnect eventsocket.io.on('reconnect',()=>{console.log('reconnected');// Emit "updateSocketId" event to update the recorded socket ID with user and roomsocket.emit('updateSocketId',{user,room},error=>{if(error){console.error(error);}});});

// Add listener for "updateSocketId" eventsocket.on('updateSocketId',async({user,room})=>{try{addUser(socket.id,user,room);socket.join(room);}catch(err){console.error(err);}});

Instances will persist if there is an active connection until all requests close or time out. Even if you use Cloud Run session affinity, it is possible for new requests to be load balanced to active containers, which allows containers to scale in. If you are concerned about large numbers of containers persisting after a spike in traffic, you can lower the maximum timeout value, so that unused sockets are cleaned up more frequently.

Shipping the service

1. Create a Memorystore for Redis instance:

   gcloudredisinstancescreateINSTANCE_ID--size=1--region=REGION

   Replace INSTANCE_ID with the name for the instance, i.e. my-redis-instance, and REGION_ID with the region for all your resources and services, i.e. us-central1.

   Instance will be automatically allocated an IP range from the default service network range. This tutorial uses 1GB of memory for the local cache of messages in the Redis instance. Learn more about Determining the initial size of a Memorystore instance for your use case.

2. Set up a Serverless VPC Access connector:

   To connect to your Redis instance, your Cloud Run service needs access to the Redis instance's authorized VPC network.

   Every VPC connector requires its own /28 subnet to place connector instances on. This IP range must not overlap with any existing IP address reservations in your VPC network. For example, 10.8.0.0 (/28) will work in most new projects or you can specify another unused custom IP range such as 10.9.0.0 (/28). You can see which IP ranges are currently reserved in the Google Cloud console.

   gcloudcomputenetworksvpc-accessconnectorscreateCONNECTOR_NAME\--regionREGION\--range"10.8.0.0/28"

   Replace CONNECTOR_NAME with the name for your connector.

   This command creates a connector in the default VPC network, same as the Redis instance, with e2-micro machine size. Increasing the machine size of the connector can improve the throughput of the connector but also will increase cost. The connector must also be in the same region as the Redis instance. Learn more about Configuring Serverless VPC Access.

3. Define an environment variable with the IP address of your Redis instance's authorized network:

   exportREDISHOST=$(gcloudredisinstancesdescribeINSTANCE_ID--regionREGION--format"value(host)")

4. Create a service account to serve as the service identity. By default this has no privileges other than project membership.

   gcloudiamservice-accountscreatechat-identity gcloudprojectsadd-iam-policy-bindingPROJECT_ID\ --member=serviceAccount:chat-identity@PROJECT_ID.iam.gserviceaccount.com\ --role=roles/serviceusage.serviceUsageConsumer

5. Build and deploy the container image to Cloud Run:

   gcloudrundeploychat-app--source.\--vpc-connectorCONNECTOR_NAME\--allow-unauthenticated\--timeout3600\--service-accountchat-identity\--update-env-varsREDISHOST=$REDISHOST

   Respond to any prompts to install required APIs by responding y when prompted. You only need to do this once for a project. Respond to other prompts by supplying the platform and region, if you haven't set defaults for these as described in the setup page. Learn more about Deploying from source code.

Trying it out

To try out the complete service:

1. Navigate your browser to the URL provided by the deployment step above.

2. Add your name and a chat room to sign in.

3. Send a message to the room!

If you choose to continue developing these services, remember that they have restricted Identity and Access Management (IAM) access to the rest of Google Cloud and will need to be given additional IAM roles to access many other services.