Voici ma tentative de faire fonctionner les éléments suivants:
- express : 4.14
- socket.io : 1.5
- passeport (en utilisant les sessions): 0,3
- redis : 2.6 (Structure de données vraiment rapide pour gérer les sessions; mais vous pouvez également en utiliser d'autres comme MongoDB. Cependant, je vous encourage à l'utiliser pour les données de session + MongoDB pour stocker d'autres données persistantes comme les utilisateurs)
Puisque vous voudrez peut-être également ajouter des requêtes API, nous utiliserons également le package http pour que HTTP et Web socket fonctionnent sur le même port.
server.js
L'extrait suivant comprend uniquement tout ce dont vous avez besoin pour configurer les technologies précédentes. Vous pouvez voir la version complète de server.js que j'ai utilisée dans l'un de mes projets ici .
import http from 'http';
import express from 'express';
import passport from 'passport';
import { createClient as createRedisClient } from 'redis';
import connectRedis from 'connect-redis';
import Socketio from 'socket.io';
// Your own socket handler file, it's optional. Explained below.
import socketConnectionHandler from './sockets';
// Configuration about your Redis session data structure.
const redisClient = createRedisClient();
const RedisStore = connectRedis(Session);
const dbSession = new RedisStore({
client: redisClient,
host: 'localhost',
port: 27017,
prefix: 'stackoverflow_',
disableTTL: true
});
// Let's configure Express to use our Redis storage to handle
// sessions as well. You'll probably want Express to handle your
// sessions as well and share the same storage as your socket.io
// does (i.e. for handling AJAX logins).
const session = Session({
resave: true,
saveUninitialized: true,
key: 'SID', // this will be used for the session cookie identifier
secret: 'secret key',
store: dbSession
});
app.use(session);
// Let's initialize passport by using their middlewares, which do
//everything pretty much automatically. (you have to configure login
// / register strategies on your own though (see reference 1)
app.use(passport.initialize());
app.use(passport.session());
// Socket.IO
const io = Socketio(server);
io.use((socket, next) => {
session(socket.handshake, {}, next);
});
io.on('connection', socketConnectionHandler);
// socket.io is ready; remember that ^this^ variable is just the
// name that we gave to our own socket.io handler file (explained
// just after this).
// Start server. This will start both socket.io and our optional
// AJAX API in the given port.
const port = 3000; // Move this onto an environment variable,
// it'll look more professional.
server.listen(port);
console.info(`🌐 API listening on port ${port}`);
console.info(`🗲 Socket listening on port ${port}`);
sockets / index.js
Notre socketConnectionHandler, je n'aime tout simplement pas tout mettre dans server.js (même si vous le pouvez parfaitement), d'autant plus que ce fichier peut finir par contenir beaucoup de code assez rapidement.
export default function connectionHandler(socket) {
const userId = socket.handshake.session.passport &&
socket.handshake.session.passport.user;
// If the user is not logged in, you might find ^this^
// socket.handshake.session.passport variable undefined.
// Give the user a warm welcome.
console.info(`⚡︎ New connection: ${userId}`);
socket.emit('Grettings', `Grettings ${userId}`);
// Handle disconnection.
socket.on('disconnect', () => {
if (process.env.NODE_ENV !== 'production') {
console.info(`⚡︎ Disconnection: ${userId}`);
}
});
}
Matériel supplémentaire (client):
Juste une version très basique de ce que pourrait être le client JavaScript socket.io:
import io from 'socket.io-client';
const socketPath = '/socket.io'; // <- Default path.
// But you could configure your server
// to something like /api/socket.io
const socket = io.connect('localhost:3000', { path: socketPath });
socket.on('connect', () => {
console.info('Connected');
socket.on('Grettings', (data) => {
console.info(`Server gretting: ${data}`);
});
});
socket.on('connect_error', (error) => {
console.error(`Connection error: ${error}`);
});
Références:
Je ne pouvais tout simplement pas faire référence à l'intérieur du code, alors je l'ai déplacé ici.
1: Comment configurer vos stratégies Passport: https://scotch.io/tutorials/easy-node-authentication-setup-and-local#handling-signupregistration
