Question

想象一下，我有一个只显示按钮的应用程序，用户可以点击此按钮。按钮下方有一个点击计数器。它将显示所有用户的所有点击总和。这个想法类似于cookie clicker游戏，但我想把它变成一个多人游戏。

这可以在app中实时查看此计数器吗？

我想知道我是否可以在这里使用Socket.IO。

Answer 1

假设您知道如何运行节点应用，这里有一个非常基本的示例：

文件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>

文件package.json

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

使用本地主机

打开提示
cd / files_directory /
npm install
node server.js

然后打开浏览器并打开多个标签：

http://127.0.0.1:89/

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

Answer 2

在node.js中，子进程之间共享套接字连接（服务器端口）（集群模式：https://nodejs.org/api/cluster.html）。您还可以在多台计算机（https://socket.io/docs/using-multiple-nodes/）之间扩展Web套接字。如果你要创建一个小应用程序，你可能会有一个服务器（有很多进程），你可以创建一个简单的队列，它将收集所有增量。请记住，TCP / IP将确保您将按照生成它们的顺序获取Web套接字请求。此队列将向您的数据库发出/同步请求。对于许多服务器，应用程序扩展将更加复杂。然后，简单的应用程序队列将被您的数据库（和适当的隔离级别）替换，或者用例如redis或rabbitmq。 PS。 Socket.io是不错的选择。

使用Socket.IO实时显示点击计数器的应用程序

2 个答案: