websocket总结

最新推荐文章于 2022-09-20 13:24:50 发布

lzz141_cn

最新推荐文章于 2022-09-20 13:24:50 发布

阅读量172

点赞数

本文链接：https://blog.csdn.net/lzz141_cn/article/details/87807456

版权

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>