使用Socket.io实时显示的单击计数器

想象我有一个仅显示按钮的应用程序，用户可以单击此按钮。按钮下方有一个点击的计数器。它将显示所有用户的所有点击的总和。这个想法类似于Cookie Clicker游戏，但我想像多人游戏一样做这个。

这可以在应用程序中实时看到此计数器？

我想知道我是否可以在此处使用socket.io。

假设您知道如何运行节点应用，这是一个非常 basic 示例：

文件server.js

var express = require('express');
var app=express();
var http = require('http').Server(app);
var server = require('socket.io')(http);
var port=89;
var counter=0;//Initial counter value 
app.get('/', function(req, res) {
        res.sendFile(__dirname + '/index.html');
    });

server.on('connection', function(socket)
{
    console.log('a user connected');
    //on user connected sends the current click count
    socket.emit('click_count',counter);
    //when user click the button
    socket.on('clicked',function(){
    counter+=1;//increments global click count
    server.emit('click_count',counter);//send to all users new counter value
    });
});
//starting server
http.listen(port, function()
{
    console.log('listening on port:'+port);
});

文件index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Socket.IO Clicker</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
    <div class="row">
      <h1 style="text-align: center">Click Counter</h1> </div>
    <div class="row">
        <div class="col-md-12 ">
            <p style="text-align: center"><button id='btn_click' class="bnt btn-lg btn-success">Click Me!</button></p>
            <p style="text-align: center">Click counts:<span id="counter"></span></p>
        </div>
    </div>
</div>

<script>
    $(function () {
        var socket = io();//connect to the socket
        socket.on('connect',function()
        {
           console.log('Yeah I am connected!!');
        });
        //Listen from server.js
        socket.on('click_count',function(value)
        {
            $('#counter').html(value);//Set new count value
        });
        //Says to server that the button has been clicked
        $('#btn_click').click(function()
        {
            socket.emit('clicked');//Emitting user click
        });
    });
</script>
</body>
</html>

文件软件包.json

{
    "name": "ClickME",
    "version": "0.0.1",
    "description": "Multiclick",
    "dependencies": {
        "express": "4.10.2",
        "socket.io": "1.7.2"
    }
}

localhost用法

打开提示
cd/files_directory/
NPM安装
节点server.js

然后打开浏览器并打开多个选项卡：

http://127.0.0.1:89/

享受:)希望这会有所帮助。

in node.js socket Connection（服务器端口）在子进程之间共享（群集模式：https：//nodejs.org/api/cluster.html）。您还可以在几台计算机（https://socket.io/docs/using-multiple-nodes/）之间扩展Web插座。如果要创建小应用程序，则可能会有一台服务器（有许多流程），然后可以创建一个简单的队列，该队列将收集所有增量。请记住，TCP/IP将确保您以生成的顺序获得Web套接字请求。此队列将向您的数据库提出/同步请求。如果多个服务器，应用程序缩放将更加复杂。然后，简单的应用队列将被您的数据库（以及适当的隔离级别）或例如。REDIS或RABBITMQ。PS。socket.io是不错的选择。

相关内容

最新更新

热门标签：