koa_socket_demo 广播 聊天室 多房间

app.js

var Koa=require('koa'),
    router = require('koa-router')(),
    views = require('koa-views');

var url=require('url');

const IO = require( 'koa-socket' )
const io = new IO();
var app=new Koa();

io.attach( app );


app.use(views('views',{
    extension:'ejs'  /*应用ejs模板引擎*/
}))

router.get('/',async (ctx)=>{
   let title="你好ejs";
   await ctx.render('index',{
        title:title
    });
})

app.use(router.routes());   /*启动路由*/
app.use(router.allowedMethods());


app._io.on( 'connection', socket => {

    console.log('建立连接了');

    var roomid=url.parse(socket.request.url,true).query.roomid;   /*获取房间号/ 获取桌号*/

    //console.log(roomid);

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


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

        console.log(data);
        //socket.emit('serverEmit','我接收到增加购物车的事件了');  /*发给指定用户*/

        //app._io.emit('serverEmit','我接收到增加购物车的事件了');  /*广播*/

        //app._io.to(roomid).emit('serverEmit','我接收到增加购物车的事件了');

        socket.broadcast.to(roomid).emit('serverEmit','我接收到增加购物车的事件了');



    })
})


app.listen(3000);




/*使用步骤
    1、安装

    cnpm i -S koa-socket

    2、引入

    const IO = require( 'koa-socket' )

    3、实例化const io = new IO()


    4、
    io.attach( app )


    5、配置服务端

    app._io.on( 'connection', socket => {

     console.log('建立连接了');
     })


    6、

         <script src="http://localhost:3000/socket.io/socket.io.js"></script>

         <script>

         var socket=io.connect('http://localhost:3000/')

         </script>
 * */

index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <script src="http://localhost:3000/socket.io/socket.io.js"></script>
    <script>

        var socket=io.connect('http://localhost:3000/');

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

                console.log(data);
        })

        function send(){

            socket.emit('addCart','我是客户端的数据');
        }

    </script>


</head>
<body>


<% include public/header.ejs%>
这是一个ejs的模板引擎

<h2><%=title%></h2>


<button onclick="send()">给服务器发送消息</button>


</body>
</html>

user1.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>socket.io</title>
    <script src="http://192.168.0.3:3000/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:3000?roomid=1');

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

        console.log(data);
    });

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

</script>

user2.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>socket.io</title>
    <script src="http://192.168.0.3:3000/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:3000?roomid=2');

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

        console.log(data);
    });

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

</script>

user3.html

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


</body>
</html>

<script type="text/javascript">

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

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

        console.log(data);
    });

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

</script>

 

posted on 2020-07-26 16:10  LoaderMan  阅读(482)  评论(0)    收藏  举报

导航