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

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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值