Skip to content

Commit

Permalink
docs(examples): add example with traefik
Browse files Browse the repository at this point in the history
  • Loading branch information
darrachequesne committed Jan 31, 2021
1 parent cf873fd commit 86eb422
Show file tree
Hide file tree
Showing 9 changed files with 637 additions and 0 deletions.
22 changes: 22 additions & 0 deletions examples/cluster-traefik/README.md
@@ -0,0 +1,22 @@

# Socket.IO Chat with traefik & [redis](https://redis.io/)

A simple chat demo for Socket.IO

## How to use

Install [Docker Compose](https://docs.docker.com/compose/install/), then:

```
$ docker-compose up -d
```

And then point your browser to `http://localhost:3000`.

You can then scale the server to multiple instances:

```
$ docker-compose up -d --scale=server=7
```

The session stickiness, which is [required](https://socket.io/docs/v3/using-multiple-nodes/) when using multiple Socket.IO server instances, is achieved with a cookie. More information [here](https://doc.traefik.io/traefik/v2.0/routing/services/#sticky-sessions).
27 changes: 27 additions & 0 deletions examples/cluster-traefik/docker-compose.yml
@@ -0,0 +1,27 @@
version: "3"

services:
traefik:
image: traefik:2.4
volumes:
- ./traefik.yml:/etc/traefik/traefik.yml
- /var/run/docker.sock:/var/run/docker.sock
links:
- server
ports:
- "3000:80"
- "8080:8080"

server:
build: ./server
links:
- redis
labels:
- "traefik.http.routers.chat.rule=PathPrefix(`/`)"
- traefik.http.services.chat.loadBalancer.sticky.cookie.name=server_id
- traefik.http.services.chat.loadBalancer.sticky.cookie.httpOnly=true

redis:
image: redis:6-alpine
labels:
- traefik.enable=false
15 changes: 15 additions & 0 deletions examples/cluster-traefik/server/Dockerfile
@@ -0,0 +1,15 @@
FROM node:14-alpine

# Create app directory
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app

# Install app dependencies
COPY package.json /usr/src/app/
RUN npm install --prod

# Bundle app source
COPY . /usr/src/app

EXPOSE 3000
CMD [ "npm", "start" ]
83 changes: 83 additions & 0 deletions examples/cluster-traefik/server/index.js
@@ -0,0 +1,83 @@
// Setup basic express server
var express = require('express');
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io')(server);
var redis = require('socket.io-redis');
var port = process.env.PORT || 3000;
var crypto = require('crypto');
var serverName = crypto.randomBytes(3).toString('hex');

io.adapter(redis({ host: 'redis', port: 6379 }));

server.listen(port, function () {
console.log('Server listening at port %d', port);
console.log('Hello, I\'m %s, how can I help?', serverName);
});

// Routing
app.use(express.static(__dirname + '/public'));

// Chatroom

var numUsers = 0;

io.on('connection', function (socket) {
socket.emit('my-name-is', serverName);

var addedUser = false;

// when the client emits 'new message', this listens and executes
socket.on('new message', function (data) {
// we tell the client to execute 'new message'
socket.broadcast.emit('new message', {
username: socket.username,
message: data
});
});

// when the client emits 'add user', this listens and executes
socket.on('add user', function (username) {
if (addedUser) return;

// we store the username in the socket session for this client
socket.username = username;
++numUsers;
addedUser = true;
socket.emit('login', {
numUsers: numUsers
});
// echo globally (all clients) that a person has connected
socket.broadcast.emit('user joined', {
username: socket.username,
numUsers: numUsers
});
});

// when the client emits 'typing', we broadcast it to others
socket.on('typing', function () {
socket.broadcast.emit('typing', {
username: socket.username
});
});

// when the client emits 'stop typing', we broadcast it to others
socket.on('stop typing', function () {
socket.broadcast.emit('stop typing', {
username: socket.username
});
});

// when the user disconnects.. perform this
socket.on('disconnect', function () {
if (addedUser) {
--numUsers;

// echo globally that this client has left
socket.broadcast.emit('user left', {
username: socket.username,
numUsers: numUsers
});
}
});
});
17 changes: 17 additions & 0 deletions examples/cluster-traefik/server/package.json
@@ -0,0 +1,17 @@
{
"name": "socket.io-chat",
"version": "0.0.0",
"description": "A simple chat client using socket.io",
"main": "index.js",
"author": "Grant Timmerman",
"private": true,
"license": "MIT",
"dependencies": {
"express": "4.13.4",
"socket.io": "^3.1.0",
"socket.io-redis": "^6.0.1"
},
"scripts": {
"start": "node index.js"
}
}
28 changes: 28 additions & 0 deletions examples/cluster-traefik/server/public/index.html
@@ -0,0 +1,28 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Socket.IO Chat Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul class="pages">
<li class="chat page">
<div class="chatArea">
<ul class="messages"></ul>
</div>
<input class="inputMessage" placeholder="Type here..."/>
</li>
<li class="login page">
<div class="form">
<h3 class="title">What's your nickname?</h3>
<input class="usernameInput" type="text" maxlength="14" />
</div>
</li>
</ul>

<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="/main.js"></script>
</body>
</html>

0 comments on commit 86eb422

Please sign in to comment.