访问不同的roomId, 指定房间内推送信息
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参数，返回对象
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);
//客户端发送数据到服务器
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);
}
//服务器到客户端
socket.on('s2c',function(data){
addlist(data);
});
</script>
服务器端
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('有新的用户访问');
//服务器端地址
//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;
}
//引入房间的概念,是"广播"在小范围内使用
if(_roomId){
//加入房间
socket.join(_roomId);
}
//服务器接收客户端数据
socket.on('c2s',function(data){
console.log(data);
//服务器给客户端发送数据(点对点的方式)
//socket.emit('s2c',('你好 '+data+' ,欢迎访问我的网址'));
//服务器给客户端发送数据(对所有人广播)
if(!_roomId){
Io.emit('s2c',('你们好 '+data+' ,欢迎访问我的网址'));
}
//发送给指定房间
if(_roomId){
Io.to(_roomId).emit('s2c',(_roomId+'号房间,欢迎 '+data+'的来访'));
}
});
});
App.listen(3000,function(){
console.log('服务器地址','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"
}
}
网友评论