socket.js
// 原生node编写 // var http = require('http'); // var fs = require('fs'); // var server = http.createServer((req,res)=>{ // if(req.url=='/'){ // fs.readFile("./index.html",(err,data)=>{ // res.end(data) // }) // } // }) // var io = require('socket.io')(server); // io.on('connection',function (socket) { // console.log('1个客户端连接了'); // socket.on('from-client',(data)=>{ // console.log(data,'在服务端接收啦'); // // socket.emit('from-server',data + '要发送到客户端');//机器人原理 // io.emit('from-server',data + '要发送到客户端');//群聊原理 // }) // // }) // server.listen(3000,'localhost') var express = require('express'); var app = express(); var server = require('http').Server(app); var io = require('socket.io')(server); app.set('view engine','ejs'); app.use(express.static('public')) app.get('/',(req,res)=>{ res.render('space'); }) app.get('/news',function(req,res){ res.send('news'); }) server.listen(8080) io.of('/red').on('connection',function (socket) { var room ; socket.on('room',(data)=>{ room = data; console.log(room,'red') socket.join(room) }) socket.on('message',(msg)=>{ console.log(msg,'red msg'); console.log(room,'ddddd') socket.emit('message',msg+'too')//只向自己发消息 socket.broadcast.to(room).emit('message',msg+'too')//除自己以外的其他人 io.emit('message',msg+'too')//房间里的所有人发消息包含自己 }) }) io.of('/green').on('connection',function (socket) { var room; socket.on('room',(data)=>{ room = data; console.log(room,'green') socket.join(room) }) socket.on('message',(msg)=>{ console.log(msg,'green msg'); socket.emit('message',msg+'too')//只向自己发消息 socket.broadcast.to(room).emit('message',msg+'too')//除自己以外的其他人 io.emit('message',msg+'too')//房间里的所有人发消息包含自己 }) })
space.ejs
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="radio" name="space" value="红房间" checked>红房间 <br/> <input type="radio" name="space" value="绿房间">绿房间 <br/> <input type="button" value="华山派" id="huaBtn" > <input type="button" value="少林派" id="shaoBtn"> <input type="text" id="inVal"> <button id="btn">发送</button> <script src="http://localhost:8080/socket.io/socket.io.js"></script> <script type="text/javascript"> var redSocket = io.connect('http://localhost:8080/red'); redSocket.on('connect',function () { console.log('红空间客户端和服务端建立连接') }) redSocket.on('message',(msg)=>{ console.log(msg) }) var greenSocket = io.connect('http://localhost:8080/green'); greenSocket.on('connect',function () { console.log('绿空间客户端和服务端建立连接') }) greenSocket.on('message',(msg)=>{ console.log(msg) }) var huaBtn = document.getElementById('huaBtn');//华山派 var shaoBtn = document.getElementById('shaoBtn');//少林派 var sendBtn = document.getElementById('btn');//发送按钮 var spaces= document.getElementsByName('space'); huaBtn.onclick = function () { console.log('进入红房子的华山派'); redSocket.emit('room','hua') } shaoBtn.onclick = function () { console.log('进入红房子的少林派'); redSocket.emit('room','shao') } for(var i = 0;i<spaces.length;i++) { spaces[i].onclick = function () { console.log(huaBtn) if(this.value=='红房间'){ huaBtn.onclick = function () { console.log('进入红房子的华山派'); redSocket.emit('room','hua') } shaoBtn.onclick = function () { console.log('进入红房子的少林派'); redSocket.emit('room','shao') } }else if(this.value=='绿房间'){ huaBtn.onclick = function () { console.log('进入绿房子的华山派'); greenSocket.emit('room','hua') } shaoBtn.onclick = function () { console.log('进入绿房子的少林派'); greenSocket.emit('room','shao') } } } } sendBtn.onclick = function () { var inputVal = document.getElementById('inVal'); for(var i = 0;i<spaces.length;i++){ if(spaces[i].value=='红房间'&&spaces[i].checked){ redSocket.emit('message',inputVal.value) }else if(spaces[i].value=='绿房间'&&spaces[i].checked){ greenSocket.emit('message',inputVal.value) } } } </script> </body> </html>