【问题标题】:Nodejs server with MySQL and socket.io带有 MySQL 和 socket.io 的 Nodejs 服务器
【发布时间】:2022-01-23 19:31:07
【问题描述】:

我正在尝试使用 MySQL 和 socket.io 创建一个 Nodejs 服务器,请您帮我提供一些示例代码。我们有一个包含 20 列的表,每 30 秒我们将通过插入、删除或使用新的增量 id 更新来获得新数据。我们使用 reactjs 作为客户端。

【问题讨论】:

  • 我为nodejs和socket.io和html创建了一个简单的聊天系统。你想要那个代码
  • 会有帮助的。谢谢
  • 好的,我会发送。

标签: mysql node.js reactjs websocket socket.io


【解决方案1】:

服务器代码

    var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res) {
    res.sendFile(__dirname + '/index6.html');
});
var username = '';
var rooms;
io.on('connection', function(socket) {
    console.log("User connected");
    socket.on('join', function(name) {
        username = name;
        //console.log(username)
        io.emit('chat-msg', `${username.toUpperCase()} Welcome`);
    })
    socket.join(rooms)
    socket.on('chat msg', function(msg) {
        //console.log(msg);
        io.sockets.in(rooms).emit('chat msg', msg)
            //console.log(array)
    })

    socket.on('disconnect', function(name) {
        console.log("disconnet")
        io.emit('chat-msg', `${username.toUpperCase()} disconnected`)
    })

});

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

客户端代码

<!DOCTYPE html>
<html>

<body>
    <div class="box">
        <ul id="messages">

        </ul>
        <ul id="messages1">
        </ul>

        <form action="">
            <input id="inp" placeholder="Enter your message..." autocomplete="off" required /><button>Send</button>
        </form>
        <script src="/socket.io/socket.io.js"></script>
        <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <script>
            var name = prompt("enter name")
            var socket = io();
            socket.emit('join', name);


            $('form').submit(function(event) {
                event.preventDefault();
                socket.emit("chat msg", (name + " : " + $("#inp").val()));
                //$('#messages').append($('<li id="list">').text('You: ' +$('#inp').val()));
                $('#inp').val('');
            });

            socket.on('chat-msg', function(msg) {
                $('#messages').append($('<li id="list"><br>').text(msg));

            })
            socket.on('chat msg', function(msg) {
                $('#messages1').append($('<li id="list1"><br>').text(msg));

            })
            socket.on('left', function(data) {
                document.write(data.description)
            })
        </script>
    </div>
    <style>
        .box {
            border: 1px solid red;
            height: auto;
            width: 500px;
            position: absolute;
            right: 300px;
            border-radius: 10px;
            padding: 30px;
        }
        
        #inp {
            position: absolute;
            bottom: 10px;
            right: 200px;
            outline: none;
            border: soild blue;
            border-radius: 5px;
        }
        
        ul {
            list-style-type: none;
            padding: 50px;
            text-align: center;
        }
        
        #list {
            text-align: center;
            background-color: #6195e8;
            color: #fffafa;
            border-radius: 10px;
        }
        
        #list1 {
            text-align: right;
            background-color: #6bdde3;
            color: #ed001c;
        }
        
        button {
            color: White;
            background-color: green;
            width: 80px;
            border-radius: 10px;
            position: absolute;
            right: 150px;
            bottom: 10px;
        }
        
        #messages li {
            padding: 5px 10px;
        }
    </style>
</body>



</html>

【讨论】:

  • 感谢分享
  • 这很有用!!!!!...
猜你喜欢
  • 1970-01-01
  • 2014-05-01
  • 2021-03-17
  • 1970-01-01
  • 2016-08-20
  • 2015-05-05
  • 2020-04-09
  • 2021-01-12
  • 1970-01-01
相关资源
最近更新 更多