手机遥控点亮UE5屏幕上的烟火node.js服务器代码

学习了hocodoson的《从UE5+Arduino+OBS看互动开发》第一章1.1.4实例:手机遥控点亮UE5屏幕上的烟火课程,发现没有服务器端代码,我跟着视频截图把代码敲下来了分享给各位

原教程链接:《从UE5+Arduino+OBS看互动开发》第一章1.1.4实例:手机遥控点亮UE5屏幕上的烟火_哔哩哔哩_bilibili

                                    

index.html

<!doctype html>
<html>
    <head>
        <title>Notify UE play Something</title>
        <meta name=" viewport" content="width-device-width, height=device-height, initial-scale=1.0, 
              minimum-scale=1.0,maximum-scale=1.0, user-scalable=no">
        <style>
            *{margin:0;padding:0;}
            body{font:16px Helvetica,Arial;}
            form{ background:#000;padding:3px;position:relative;bottom:0;width:100%;}
            form input{border:0;padding:20px;width:100%;font:26px Helvetica,Arial;}
            form button{width:100%;background:rgb(150,150,225);border:none;padding:15px;}
            #message{list-style-type:none;margin:0;padding:10px;}
            #message li{padding:5px 5px;}
            #message li:nth-child(odd){background:#eee;}
            #main{overflow:auto;position:relative}
            #footer{
                height:30px;position:relative}.btn{display:block;width:50%;height:400px;float:left}
        </style>
    </head>
    <body>
        <div id="main">
            info:<ul id="message"></ul>
        </div>
        <div id="footer">
            <form action="">
                <input id="m" placeholder="Type here..." />
                <button>Send</button>
            </form>
        </div>
    
        <input type=button value="Action A" class="btn" id="btnA" />
        <input type=button value="Action B" class="btn" id="btnB" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.0/socket.io.js"></script>
        <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
        <script>
            var socket = io();
            $('form').submit(function () {
                socket.emit('chatMessage', $('#m').val());
                $('#m').val('');
                return false;
            });
            socket.on('chatMessage', function (msg) {
                $('#messages').append($('<li>')).text(msg);
                window.scrollTo(0, document.body.scrollHeight);
            });
    
            $('#btnA').on('click', function (msg) {
                socket.emit('chatMessage', 'A');
            });
    
            $('#btnB').on('click', function (msg) {
                socket.emit('chatMessage', 'B');
            });
    
        </script>
    </body>
</html>

MyServer.js

const app = require('express')();
var http = require('http').Server(app); // createserver()
const io = require('socket.io')(http);
var util = require('util');
var clients = [];

//make one reference to event name so it can be easily renamed
const chatEvent = "chatMessage";

//server web client
app.get('/', function (req, res) {
    res.sendFile(__dirname + '/index.html');    
});

io.on('connection', function (socket) {
    clients.push(socket.id);
    var clientConnectedMsg = 'User Connected' + util.inspect(socket.id) +
        ', total:' + clients.length;
    console.log(clientConnectedMsg);
    socket.on('disconnect', function () {
        clients.pop(socket.id);
        var clientConnectedMsg = 'User disconnected' + util.inspect(socket.id) +
            ', total:' + clients.length;
        io.emit(chatEvent, clientConnectedMsg);
        console.log(clientConnectedMsg);
    })

    //muticast received message from client
    socket.on(chatEvent, msg => {
        const serverMsg = socket.id + " : " + msg;
        io.emit(chatEvent, msg);
        console.log('muticast:' + serverMsg);
    });
});

http.listen(3000, function () {
    console.log('listening on * :3000');
});

function getRandomInRange(min, max) {
    return Math.random() * (max - min) + min;
}

function sendWind() {
    console.log('Wind Sent to User');
    io.emit('new wind', getRandomInRange(0, 360));
}

//setInterval(sendWind, 3000);

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值