在实际项目中有这样一种需求：app允许同著作权归作者所有，禁止商业用途转载。【作者：唐霜】一个用户多点登陆，登陆后用户可能进行某些【作者：唐霜】转载请注明出处：www.tangshuang.net操作，这些操作可能影响数据库，同时理论上【本文受版权保护】【版权所有，侵权必究】讲会影响界面，而如果是多点登陆，按传统的【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。架构，如果用户A进行来某些操作，改变来数本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。据库数据，用户B的用户界面是不会有任何变原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】化，用户B会继续操作并提交数据，这时可能【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net提交上来的数据是A改过之前对，导致A的修著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】改反而被B提交的老数据覆盖了。

著作权归作者所有，禁止商业用途转载。【本文受版权保护】本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】【版权所有，侵权必究】

友好的操作是，当A对数据库进行提交，并影【未经授权禁止转载】【版权所有，侵权必究】响到B时，应该通知B，让B选择是否采用新【未经授权禁止转载】未经授权，禁止复制转载。数据。这种友好的提示被广泛使用。那么在我【原创内容，转载请注明出处】原创内容，盗版必究。们的express应用中如何实现呢？这篇本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。文章就利用express和socket.【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】io搭配，实现一套这个需求的逻辑。

原创内容，盗版必究。【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net

在express应用中加入socket.【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】io

本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。【作者：唐霜】

大多数前端er都知道socket.io，本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。它是一个基于websocket的库，你可本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。以用它来方便的实现一些socket需求。【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。对于不支持websocket的浏览器，它【原创不易，请尊重版权】【本文首发于唐霜的博客】也支持降级到ajax轮询来解决。

【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。

对于一个应用而言，socket的实现有服【版权所有，侵权必究】【作者：唐霜】务端和客户端两个部分，因此socket.【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。io有两个package，socket.io这个包是用在node端做server使用著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。的，而socket.io-client这个包是在前端做client使用。所以在【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net你的应用中需要同时安装这两个包，一个用在【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】server代码里，一个用在client【本文首发于唐霜的博客】【原创不易，请尊重版权】代码里。

原创内容，盗版必究。未经授权，禁止复制转载。【本文首发于唐霜的博客】未经授权，禁止复制转载。

server端的代码转载请注明出处：www.tangshuang.net

【版权所有，侵权必究】【原创内容，转载请注明出处】原创内容，盗版必究。

我们server端的应用是express【转载请注明来源】【作者：唐霜】搭建起来的，但是socket.io需要使【未经授权禁止转载】原创内容，盗版必究。用http模块创建的纯server，因此转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net我们将express创建的app传给ht【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.nettp.Server来获得一个纯serve原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】r：

【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】【本文首发于唐霜的博客】未经授权，禁止复制转载。

import express from "express";
import http from "http";
import socketIoServer from "socket.io";
const app = express();
const server = http.Server(app);
const io = new socketIoServer(server);
io.on("connection", (socket) => { ... });
server.listen(3000);

这是一个大致的框架，中间省略来app的各本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。种路由，以及io的connection里本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】面的内容。这段代码告诉我们如何让expr转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】ess的应用启动时，同时启动socket【未经授权禁止转载】本文作者：唐霜，转载请注明出处。.io创建的服务。

【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net【本文受版权保护】【关注微信公众号：wwwtangshuangnet】

client端的代码【关注微信公众号：wwwtangshuangnet】

【原创不易，请尊重版权】【未经授权禁止转载】【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】

客户端的socket.io在api上和服本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】务端的非常像，只不过由于宿主环境不同，所著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】以要在内部实现上采用不同的方式，因此分来【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。两个包来做。而且如果了解网络握手的相关知著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net识，大致可以知道建立socket连接都要转载请注明出处：www.tangshuang.net【未经授权禁止转载】走哪些网络连接的步骤。我们来看下clie未经授权，禁止复制转载。【未经授权禁止转载】nt端代码：

【作者：唐霜】原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net

import socketIoClient from 'socket.io-client';
let io = new socketIoClient();
io.on("connection", (socket) => { ... });

可以看到，基本没啥差别。在我们没有深入之【转载请注明来源】【版权所有】唐霜 www.tangshuang.net前，可以把一个客户端于服务端的一个连接当【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】作点对点（P2P），由客户端率先发起so【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。cket连接，连接成功之后客户端和服务端转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。的connection事件被触发，两端的未经授权，禁止复制转载。【原创不易，请尊重版权】所有操作都在这个事件的回调函数中执行，双转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net方都可以通过发起.disconnect(【转载请注明来源】原创内容，盗版必究。)来断开连接。

未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】

cookie方式确定用户身份【转载请注明来源】

【原创不易，请尊重版权】【版权所有，侵权必究】【原创不易，请尊重版权】【本文首发于唐霜的博客】

我们大部分应用通过cookie来确定某个【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。用户的身份，对于多点登陆用户而言，虽然是【本文受版权保护】【未经授权禁止转载】同一个用户，但cookie是不同的，因此本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】，我们要通过cookie找出user i【版权所有】唐霜 www.tangshuang.net【本文受版权保护】d来确定身份。在服务端，要通过user 本文版权归作者所有，未经授权不得转载。【转载请注明来源】id来决定socket的一条消息要发送给【本文受版权保护】著作权归作者所有，禁止商业用途转载。哪个客户端。那么怎么确定身份呢？

【原创不易，请尊重版权】【未经授权禁止转载】【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。

socket.io新版本已经官方支持co【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。okie获取了，cookie被保存在socket.handshake.headers.cookie中，然而这里得到的cookie是一个完整【转载请注明来源】原创内容，盗版必究。的原始cookie，我们希望通过一个pa【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】rser工具把它解析成对象的形式便于我们【未经授权禁止转载】【原创不易，请尊重版权】获取。cookie-parser这个包已【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net经做了这件事，express应用直接用它【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。来解析，而一个叫socket.io-co【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。okie-parser的包对它进行来封装著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net，让socket.io也支持同样的方式：

本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】

import express from "express";
import cookieParser from "cookie-parser";
import socketIoServer from "socket.io";
import socketIoCookieParser from "socket.io-cookie-parser";
import http from "http";
const app = express();
const server = http.Server(app);
const io = new socketIoServer(server);
app.use(cookieParser());
io.use(socketIoCookieParser());
io.on("connection", (socket) => {
    let cookies = socket.request.cookies;
    let autcookie = cookies.auth;
    // 接下来通过你系统内部的机制，通过这个cookie去获取用户的user id
    ...
});
server.listen(3000);

上面这段代码演示了怎么在socket.i转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.neto中获取cookie信息，而你的expr【原创内容，转载请注明出处】【转载请注明来源】ess中也可以获取一模一样的cookie本文作者：唐霜，转载请注明出处。【本文受版权保护】，所以就有了对应关系。

【作者：唐霜】本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。本文作者：唐霜，转载请注明出处。

http保存，socket推送【本文首发于唐霜的博客】

本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】

现在进入最关键的一个环节。前面的两节帮我【未经授权禁止转载】转载请注明出处：www.tangshuang.net们解决了express和socket.i转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.neto的部署问题，但是怎么融合还没有讲。让我转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net们回到一个现实的案例中，我们创建了一个聊【版权所有，侵权必究】【原创不易，请尊重版权】天室，一个用户发送消息到服务端，我们采用【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.netajax请求发送（虽然实际上可以采用so转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.netcket.io的客户端程序发送），他自己【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。本地可以马上显示这条消息，问题是，其它用本文作者：唐霜，转载请注明出处。【作者：唐霜】户的屏幕上怎么马上显示这条消息呢？我们需【作者：唐霜】【本文首发于唐霜的博客】要通过服务端发出一个消息推送，把更新的内【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】容推送给所有客户端，这样所有客户端就可以转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】得到新的内容并显示在界面上。

著作权归作者所有，禁止商业用途转载。【转载请注明来源】本文作者：唐霜，转载请注明出处。

逻辑看上去很简单。而且如果你对socke【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。t.io有了解的话，通过服务端一个soc【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】ket.broadcast.emit和客本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。户端的socket.on，可以很容易实现转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。。问题在于怎么把“http保存消息完再s转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。ocket推送”这个逻辑实现。

【本文首发于唐霜的博客】【原创内容，转载请注明出处】原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】

我们的大部分api都是restful的，本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】因此保存这个消息常常是一个post请求，【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】得到这个请求之后，我们在express的本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】某个路由中实现写入数据库的过程。然而我们【原创内容，转载请注明出处】【本文受版权保护】去研究socket.io的使用方式，发现【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】socket.io的响应是独立的作用域，本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。和express创建的app是分离的。
未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net 因此，我们要提供一个全局的变量来保存每【本文首发于唐霜的博客】【本文受版权保护】一个socket连接，并且把每一个soc本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】ket连接和建立它的用户对应起来。

本文作者：唐霜，转载请注明出处。【本文受版权保护】【转载请注明来源】转载请注明出处：www.tangshuang.net

import express from "express";
import cookieParser from "cookie-parser";
import socketIoServer from "socket.io";
import socketIoCookieParser from "socket.io-cookie-parser";
import http from "http";
const app = express();
const server = http.Server(app);
const io = new socketIoServer(server);
const sockets = {};

app.use(cookieParser());
io.use(socketIoCookieParser());
app.use((req, res, next) => {
    app.sockets = req.sockets = res.sockets = sockets;
    next();
});
io.on("connection", (socket) => {
    let cookies = socket.request.cookies;
    let autcookie = cookies.auth;
    if (!autcookie) {
        console.log("a user connected by socket, but without sso cookie, so disconnected.");
        socket.disconnect();
        return;
    }
    getUserId(autcookie).then((uid) => {
        sockets[uid] = sockets[uid] || [];
        sockets[uid].push(socket);
        io.on("disconnection", () => {
            sockets[uid] = sockets[uid].filter((item) => item !== socket);
        });
    });
});
server.listen(3000);

这其实是一个比较hack的手法，但是可以著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】解决我们的问题。我们创建来一个全局的so著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.netckets变量，并把这个变量赋值给exp本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。ress创建的app，这样我们就可以在路【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。由里面使用sockets这个属性了。

【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】原创内容，盗版必究。【本文首发于唐霜的博客】

这个sockets保存了所有的socke【本文首发于唐霜的博客】【转载请注明来源】t连接，并且第一层按照userid进行保【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net存，也就是说在路由里面只要知道useri原创内容，盗版必究。本文作者：唐霜，转载请注明出处。d，就可以知道这个用户都建立了哪些soc原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。ket。第二层是一个数组，因为相同use本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】rid的登陆用户可能在多个地方登陆了，因【本文首发于唐霜的博客】未经授权，禁止复制转载。此可能建立多个socket连接，我们还要【未经授权禁止转载】原创内容，盗版必究。用这个数组实现推送，即当其中一个客户端更【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。新了，我们先找出userid，然后得到这【转载请注明来源】【版权所有】唐霜 www.tangshuang.net个数组，并且遍历这个数组，对每一个soc【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。ket抛出一个推送消息，这样，虽然是同一【作者：唐霜】【关注微信公众号：wwwtangshuangnet】个userid但不同client就可以接本文作者：唐霜，转载请注明出处。【本文受版权保护】收到更新提示。

【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。

getUserId是我自己的内部函数，不本文作者：唐霜，转载请注明出处。【未经授权禁止转载】需要公开。不过，在disconnect的【转载请注明来源】本文作者：唐霜，转载请注明出处。时候，我们不忘把这个socket从soc转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.netkets中删除，这是一个好习惯，也保证程【原创内容，转载请注明出处】【转载请注明来源】序不会出错。

【未经授权禁止转载】【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net

小结原创内容，盗版必究。

本文作者：唐霜，转载请注明出处。【转载请注明来源】【未经授权禁止转载】【未经授权禁止转载】

上面的阐述主要还是从server端去阐述【原创内容，转载请注明出处】【本文受版权保护】，没有考虑客户端提示应该怎么做。其实客户【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】端也是在某个on中进行提示处理，或者你可未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】以更自动一些，得到这个推送之后，自己默认原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net发一个新的ajax去获取最新数据。通过本【原创不易，请尊重版权】【版权所有，侵权必究】文，主要让你可以了解如何实现http和s著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。ocket的结合。

【未经授权禁止转载】未经授权，禁止复制转载。【本文受版权保护】【本文首发于唐霜的博客】【本文受版权保护】

2018-03-05 6998 socket