185.Vue.js智能扫码点餐系统（十九）【 Express+Socket.io多房间聊天、同一桌点餐用户之间的信息同步（扩展）】2019.03.26

最新推荐文章于 2019-12-25 21:14:58 发布

youyouwuxin1234

最新推荐文章于 2019-12-25 21:14:58 发布

阅读量818

点赞数

分类专栏： Vue 扫码点餐系统文章标签： Vue

本文链接：https://blog.csdn.net/youyouwuxin1234/article/details/88814133

版权

Vue 同时被 2 个专栏收录

79 篇文章 1 订阅

订阅专栏

扫码点餐系统

34 篇文章 12 订阅

订阅专栏

0、知识点

广播
express
socket.io
多房间聊天
同一桌用户信息同步

1、app.js

/*1.安装
 npm install socket.io


 2、复制下面代码

 var server = require('http').Server(app);
 var io = require('socket.io')(server);

 3、app.listen改成

    server.listen(8000,'192.168.0.3');


4、配置socket

 io.on('connection', function (socket) {

     console.log('socket配置成功')
 });


 5、在客户端引入socket.io  建立连接

 var socket = io.connect('http://192.168.0.3:8000');



6、

io.emit  广播
socket.emit  谁给我发的信息我回返回给谁

socket.join(roomid);   加入分组

io.to(roomid).emit('addCart','Server AddCart Ok')  通知分组内的所有用户

socket.broadcast.to(roomid).emit('addCart','Server AddCart Ok');  通知分组内的用户不包括自己


 */





var express=require('express');

var url=require('url');

var app=express();

var server = require('http').Server(app);
var io = require('socket.io')(server);

app.set('view engine','ejs');
app.use(express.static('public'));

app.get('/',function(req,res){
    //res.send('首页');
    res.render('index');
})


app.get('/news',function(req,res){
    res.send('news');

})

server.listen(8000,'192.168.0.3');   /*改ip*/



//写socket.io的服务

io.on('connection', function (socket) {

    console.log('socket配置成功')

    //io.emit  广播
    //socket.emit  谁给我发的信息我回返回给谁

    //获取客户端建立连接的时候传入的值，也就是桌子号
    //console.log(socket.request.url);
   var roomid=url.parse(socket.request.url,true).query.roomid;   /*获取房间号/ 获取桌号*/

   //console.log(roomid);

    socket.join(roomid);  /*加入房间/加入分组*/

    socket.on('addCart',function(data){

        //console.log(data)

        //广播给指定桌号的用户        对房间（分组）内的用户发送消息
        //io.to(roomid).emit('addCart','Server AddCart Ok'); //通知分组内的所有用户

        socket.broadcast.to(roomid).emit('addCart','Server AddCart Ok'); //通知分组内的用户不包括自己

    })


});

用户给服务器发送请求，服务器监听到客户端这边有任何数据变化时，会向用户发送消息，达到数据实时同步更新的要求
通知同一桌（分组内）的所有用户，但不包括用户自己

在这里插入图片描述
2、index客户端1.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>socket.io</title>
    <script src="http://192.168.0.3:8000/socket.io/socket.io.js"></script>
</head>
<body>
<h1>socket.io的多房间1111</h1>
<input type="button" value="加入购物车" onclick="addCart()"><br>


</body>
</html>

<script type="text/javascript">

    //和服务器建立长连接
    var socket = io.connect('http://192.168.0.3:8000?roomid=1');

    //接收服务器返回的信息
    socket.on('addCart',function(data){

        console.log(data);
    });

    function addCart(){
        socket.emit('addCart','addCart');
    }

</script>

3、index客户端2.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>socket.io</title>
    <script src="http://192.168.0.3:8000/socket.io/socket.io.js"></script>
</head>
<body>
<h1>socket.io的多房间222</h1>
<input type="button" value="加入购物车" onclick="addCart()"><br>


</body>
</html>

<script type="text/javascript">

    //和服务器建立长连接
    var socket = io.connect('http://192.168.0.3:8000?roomid=2');

    //接收服务器返回的信息
    socket.on('addCart',function(data){

        console.log(data);
    });

    function addCart(){
        socket.emit('addCart','addCart');
    }

</script>