koa_socket_demo 廣播 聊天室 多房間
阿新 • • 發佈：2020-07-26
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>