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>