訪問不同的roomId, 指定房間內(nèi)推送信息
http://localhost:3000/?roomId=15
瀏覽器端
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="http://localhost:3000/socket.io/socket.io.js"></script>
</head>
<body>
<p>房間號碼：<em id="roomIdTxt"></em>號</p>
<button id="btn1">登錄</button>
<input id="text1" type="text" value="" placeholder="請輸入姓名" />
<ol id="ol1"></ol>
</body>
</html>
<script type="text/javascript">
//獲取get中query參數(shù)妙痹，返回對象
function getQuery(url){
var _url = url || window.location.href;
var _str = '';
var res = {};
if(_url.indexOf('?')!=-1){
_str = _url.split('?')[1];
if(_str.indexOf('&')!=-1){
//多個值
var _arr = _str.split('&');
for(var i=0; i<_arr.length; i++){
var _temp = _arr[i];
if(_temp.indexOf('=')!=-1){
res[_temp.split('=')[0]] = _temp.split('=')[1];
}else{
continue;
}
}
return res;
}else if(_str.indexOf('=')!=-1){
//一個值
res[_str.split('=')[0]] = _str.split('=')[1];
return res;
}
}else{
return null;
}
}
var _querySrc = getQuery();
if(_querySrc && _querySrc.roomId){
_querySrc.roomId = _querySrc.roomId || 1;
console.log('瀏覽器訪問的roomId:',_querySrc.roomId);
}
//房間號文案
document.getElementById('roomIdTxt').innerHTML = _querySrc.roomId;
//roomId臨時寫死
var socket = io.connect('http://localhost:3000?roomId='+_querySrc.roomId);
//客戶端發(fā)送數(shù)據(jù)到服務(wù)器
var oBtn = document.getElementById('btn1');
var oText1 = document.getElementById('text1');
oBtn.onclick = function(){
if(oText1.value!=''){
socket.emit('c2s',(oText1.value));
}else{
alert('輸入姓名锉试，再次登錄');
}
}
//--dom操作 新增列表項目
var listBox = document.getElementById('ol1');
function addlist(data){
var oLi = document.createElement('li');
oLi.innerHTML = data;
listBox.appendChild(oLi);
}
//服務(wù)器到客戶端
socket.on('s2c',function(data){
addlist(data);
});
</script>
服務(wù)器端
const http = require('http');
const fs = require('fs');
const url = require('url');
const App = http.createServer((req,res)=>{
res.writeHead(200,{'Content-Type':'text/html;charset="utf-8"'});
fs.readFile('./index.html',(err,data)=>{
if(!err){
res.write(data);
res.end();
}else{
console.log('404');
res.write('404');
res.end();
}
})
})
const Io = require('socket.io')(App);
Io.on('connection',function(socket){
console.log('有新的用戶訪問');
//服務(wù)器端地址
//http://localhost:3000/socket.io/socket.io.js
var _url = url.parse(socket.request.url,true);
var _roomId = '';
if(_url.query.roomId){
_roomId = _url.query.roomId;
}
//引入房間的概念,是"廣播"在小范圍內(nèi)使用
if(_roomId){
//加入房間
socket.join(_roomId);
}
//服務(wù)器接收客戶端數(shù)據(jù)
socket.on('c2s',function(data){
console.log(data);
//服務(wù)器給客戶端發(fā)送數(shù)據(jù)(點對點的方式)
//socket.emit('s2c',('你好 '+data+' ,歡迎訪問我的網(wǎng)址'));
//服務(wù)器給客戶端發(fā)送數(shù)據(jù)(對所有人廣播)
if(!_roomId){
Io.emit('s2c',('你們好 '+data+' ,歡迎訪問我的網(wǎng)址'));
}
//發(fā)送給指定房間
if(_roomId){
Io.to(_roomId).emit('s2c',(_roomId+'號房間,歡迎 '+data+'的來訪'));
}
});
});
App.listen(3000,function(){
console.log('服務(wù)器地址','http://localhost:3000');
});
//http://localhost:3000/?roomId=1
package.json.js
{
"name": "socketioDemo",
"version": "1.0.0",
"description": "",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node server.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"socket.io": "^2.3.0"
}
}
