去饭店吃饭的时候，桌上都会有一个二维码，每一桌的每一个用户都可以拿出手机独立点餐，而且同一桌的用户点餐都会在同一个购物车里，比如张三与李四一起来吃饭，张三点了青椒炒肉，李四拿出手机点餐的时候，购物车里就会显示张三点的青椒炒肉，而且每一桌的点餐与其他桌的不会相互干扰，付款的时候以桌为单位独立结账。
以上就是基本的业务场景，那么这个功能如何实现呢？下面直接上代码，请大家留意注释。
首先是服务端的实现。
代码语言：javascript复制// 1.安装
// npm install socket.io
// 引入Express
var express = require('express');
// 引入原生的URL模块
var url = require('url');
// 创建服务
var app = express();
// 2.引入Http模块,传入express生成服务器
var server = require('http').Server(app);
// 3.引入sockit.io传入生成的服务器
var io = require('socket.io')(server);
// 使用Ejs模板引擎
app.set('view engine', 'ejs');
// 配置静态文件访问文件夹
app.use(express.static('public'));
// 4.将app.listen改成server.listen
server.listen(8000, '192.168.0.3');
// 配置首页的路由
app.get('/', function (req, res) {
res.render('index');
});
// 5.建立socket链接
io.on('connection', function (socket) {
// io.emit 广播给所有人
// socket.emit 谁给我发的信息我回返回给谁
// 6.获取客户端建立连接的时候传入的桌号
var desk_id = url.parse(socket.request.url, true).query.desk_id;
// 7.将桌号加入分组
socket.join(desk_id);
// 8.监听客端添加购物车的事件
socket.on('addCart', function (data) {
// 9.广播给指定桌号的所有用户，即对房间（分组）内的用户发送消息
// io.to(desk_id).emit('addCart','Server AddCart Ok');
// 10.广播给指定桌号的所有用户，但不包括自己
socket.broadcast.to(desk_id).emit('addCart', 'Server AddCart Ok');
})
});简单说明一下，基本的实现原理为：为每一桌添加一个唯一的桌号，用户扫码的时候，将桌号发给服务端，服务端通过socket.join这个方法将桌号进行分组，用户添加购物车时，服务端只回复以桌号为分组的所有扫码用户。其中 io.to().emit() 这个方法会对该桌所有的用户回复消息，而 socket.broadcast.to().emit() 会回复给该桌的所用户，但不包括自己。
以下是客户端的基本原理实现。
代码语言：javascript复制<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Express结合socket.io实现分桌点餐</title>
<!-- 1.引入服务器上存放的socket.io.js -->
<script src="http://192.168.0.3:8000/socket.io/socket.io.js"></script>
</head>
<body>
<h1>第1桌点餐</h1>
<input type="button" value="加入购物车" onclick="addCart()"><br>
</body>
</html>
<script type="text/javascript">
// 2.和服务器建立长连接,desk_id为桌号,每一桌都有一个唯一的桌号
var socket = io.connect('http://192.168.0.3:8000?desk_id=1');
// 3.添加购物车，发送消息给服务端
function addCart() {
socket.emit('addCart', 'addCart');
};
// 4.接收服务器返回的信息
socket.on('addCart', function (data) {
console.log(data);
// Server AddCart Ok
});
</script>
