Express结合socket.io实现分桌点餐

越陌度阡

发布于 2020-11-26 14:56:51

6200

发布于 2020-11-26 14:56:51

文章被收录于专栏：大前端（横向跨端 & 纵向全栈）大前端（横向跨端 & 纵向全栈）

去饭店吃饭的时候，桌上都会有一个二维码，每一桌的每一个用户都可以拿出手机独立点餐，而且同一桌的用户点餐都会在同一个购物车里，比如张三与李四一起来吃饭，张三点了青椒炒肉，李四拿出手机点餐的时候，购物车里就会显示张三点的青椒炒肉，而且每一桌的点餐与其他桌的不会相互干扰，付款的时候以桌为单位独立结账。

以上就是基本的业务场景，那么这个功能如何实现呢？下面直接上代码，请大家留意注释。

首先是服务端的实现。

// 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() 会回复给该桌的所用户，但不包括自己。

以下是客户端的基本原理实现。

<!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>

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2019-11-03 ，如有侵权请联系 cloudcommunity@tencent.com 删除

broadcast