Creating Persistent Connections with WebSockets

You can use WebSockets to create a persistent connection from a client (such as a mobile device or a computer) to an App Engine instance. The open connection allows two-way data exchange between the client and the server at any time, resulting in lower latency and better use of resources.

WebSockets

The WebSockets protocol, defined in RFC 6455, provides a full-duplex communication channel between a client and a server. The channel is initiated from an HTTP(S) request with an "upgrade" header.

Typical use cases for WebSockets include:

  • Real time event updates, such as social media feeds, sports scores, news, or stock market prices
  • User notifications, such as software or content updates
  • Chatting applications
  • Collaborative editing tools
  • Multiplayer games

WebSockets are always available to your application without any additional setup. Once a WebSockets connection is established, it will time out after one hour.

Running a sample application with WebSockets

First, follow the instructions in "Hello, World!" for Node.js on App Engine to set up your environment and project, and to understand how App Engine Node.js apps are structured.

Clone the sample app

Copy the sample apps to your local machine, and navigate to the websockets directory:

git clone https://github.com/GoogleCloudPlatform/nodejs-docs-samples
cd nodejs-docs-samples/appengine/websockets/

Run the sample locally

  1. Install dependencies for this project by entering the following command:

    npm install
    

    or if you are using Yarn:

    yarn install
    
  2. Run the start script.

    npm start
    

    or if you are using Yarn:

    yarn start
    
  3. In your web browser, enter the following address:

    http://localhost:8080
    

Deploy and run the sample on App Engine

To deploy your application to the App Engine flexible environment, run the following command from the directory where your app.yaml is located:

With npm:

  npm run deploy

or with yarn:

  yarn run deploy

You can then direct your browser to https://[YOUR_PROJECT_ID].appspot.com/

Sample code overeview

This sample describes creating a local-memory-only chat app using the socket.io WebSockets framework.

app.yaml

In your app.yaml, set manual_scaling to 1 to ensure that only a single instance is used, so that this application works consistently with multiple users. To work across multiple instances, an extra-instance messaging system or data store would be needed.

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

package.json

This file is used to specify application dependencies, node version, and application startup:

{
  "name": "appengine-websockets",
  "description": "Node.js websockets sample for Google App Engine",
  "version": "0.0.1",
  "private": true,
  "license": "Apache Version 2.0",
  "author": "Google Inc.",
  "engines": {
    "node": ">=8"
  },
  "scripts": {
    "deploy": "gcloud app deploy",
    "start": "node app.js",
    "lint": "samples lint",
    "pretest": "npm run lint",
    "test": "node app.js & ava -T 30s test/*.js; killall node",
    "e2e-test": "samples test deploy"
  },
  "dependencies": {
    "express": "4.15.4",
    "pug": "2.0.3",
    "socket.io": "2.2.0"
  },
  "devDependencies": {
    "@google-cloud/nodejs-repo-tools": "3.1.0",
    "puppeteer": "^1.11.0"
  },
  "cloud-repo-tools": {
    "test": {
      "app": {
        "msg": "messages"
      }
    },
    "requiresKeyFile": true,
    "requiresProjectId": true
  }
}

This package.json specifies that the application depends on express, pug, and socket.io.

app.js

The app.js file contains the JavaScript code to start a server and respond to requests through a WebSockets connection. The server runs on port 8080 and responds to requests from web clients by displaying back the chat message received from the client.

/**
 * Copyright 2018, Google LLC.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

'use strict';

const app = require('express')();
app.set('view engine', 'pug');

const server = require('http').Server(app);
const io = require('socket.io')(server);

app.get('/', (req, res) => {
  res.render('index.pug');
});

io.on('connection', socket => {
  socket.on('chat message', msg => {
    io.emit('chat message', msg);
  });
});

if (module === require.main) {
  const PORT = process.env.PORT || 8080;
  server.listen(PORT, () => {
    console.log(`App listening on port ${PORT}`);
    console.log('Press Ctrl+C to quit.');
  });
}

index.pug

On the client side, the following function opens a WebSockets connection and sends a message to the server:

//- Copyright 2018 Google LLC.
//-
//- Licensed under the Apache License, Version 2.0 (the "License");
//- you may not use this file except in compliance with the License.
//- You may obtain a copy of the License at
//-
//-     http://www.apache.org/licenses/LICENSE-2.0
//-
//- Unless required by applicable law or agreed to in writing, software
//- distributed under the License is distributed on an "AS IS" BASIS,
//- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
//- See the License for the specific language governing permissions and
//- limitations under the License.

doctype html
html(lang="en")
  head
    title Socket.IO chat on App Engine
    meta(charset="utf-8")
    style.
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body { font: 13px Helvetica, Arial; }
      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages li { padding: 5px 10px; }
      #messages li:nth-child(odd) { background: #eee; }
  body
    ul(id="messages")
    form(action="")
      input(id="m" autocomplete="off")
      button Send

    script(src="/socket.io/socket.io.js")
    script(src="https://code.jquery.com/jquery-1.11.1.js")
    script.
      $(function () {
        var socket = io();
        $('form').submit(function(){
          console.log($('#m').val());
          socket.emit('chat message', $('#m').val());
          $('#m').val('');
          return false;
        });
        socket.on('chat message', function(msg){
          console.log(msg);
          $('#messages').append($('<li>').text(msg));
          window.scrollTo(0, document.body.scrollHeight);
        });
      });

index.test.js

You can use this JavaScript file to test the application:

/**
 * Copyright 2018, Google LLC.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

'use strict';

/* eslint node/no-extraneous-require: "off" */

const test = require('ava');
const puppeteer = require('puppeteer');
/* global document */

let browser, browserPage;

test.before(async () => {
  browser = await puppeteer.launch();
  browserPage = await browser.newPage();
});

test.after.always(async () => {
  await browser.close();
});

test('should process chat message', async t => {
  await browserPage.goto('http://localhost:8080');

  await browserPage.evaluate(() => {
    document.querySelector('input').value = 'test';
    document.querySelector('button').click();
  });

  await new Promise(resolve => setTimeout(resolve, 100));

  const itemText = await browserPage.evaluate(
    () => document.querySelector('li').textContent
  );

  t.is(itemText, 'test');
});

Session affinity

Not all clients support WebSockets. To work around this, many applications use libraries such as socket.io that fall back on http long polling with clients that don't support WebSockets.

App Engine typically distributes requests evenly among available instances. However, when using http long polling, multiple sequential requests from a given user need to reach the same instance.

To allow App Engine to send requests by the same user to the same instance, you can enable session affinity. App Engine then identifies which requests are sent by the same users by inspecting a cookie and routes those requests to the same instance.

Session affinity in App Engine is implemented on a best-effort basis. When developing your app, you should always assume that session affinity is not guaranteed. A client can lose affinity with the target instance in the following scenarios:

  • The App Engine autoscaler can add or remove instances that serve your application. The application might reallocate the load, and the target instance might move. To minimize this risk, ensure that you have set the minimum number of instances to handle the expected load.
  • If the target instance fails health checks, App Engine moves the session to a healthy instance.
  • Session affinity is lost when an instance is rebooted for maintenance or software updates. App Engine flexible environment VM instances are restarted on a weekly basis.

Because session affinity isn't guaranteed, you should only use it to take advantage of the ability of socket.io and other libraries to fall back on HTTP long polling in cases where the connection is broken. You should never use session affinity to build stateful applications.

Enabling and disabling session affinity

By default, session affinity is disabled for all App Engine applications. Session affinity is set at the version level of your application and can be enabled or disabled on deployment.

To enable session affinity for your App Engine version, add the following entry to your app.yaml file:

network:
  session_affinity: true

Once the version is deployed with the updated app.yaml, new requests will start serving from the same instance as long as that instance is available.

To turn off session affinity, remove the entry from your app.yaml file, or set the value to false:

network:
  session_affinity: false
Was this page helpful? Let us know how we did:

Send feedback about...

App Engine flexible environment for Node.js docs