使用Socket.IO實時顯示點擊計數器的應用

Question

想象一下，我有一個僅顯示按鈕的應用程序，用戶可以單擊該按鈕。 在按鈕下方，有一個點擊計數器。 它將顯示所有用戶的所有點擊總數。 這個想法類似於Cookie Clicker游戲，但我想使其像一個多人游戲。

是否可以在應用程序中實時查看此計數器？

我想知道是否可以在這里使用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 /文件目錄/
npm安裝
節點server.js

然后打開瀏覽器並在以下位置打開多個標簽：

http://127.0.0.1:89/

享受:)希望這會有所幫助。

Answer 2

在node.js中，套接字連接（服務器端口）在子進程之間共享（集群模式： https : //nodejs.org/api/cluster.html ）。 您還可以在多台計算機之間擴展Web套接字（ https://socket.io/docs/using-multiple-nodes/ ）。 如果要創建小型應用程序，則可能會有一台服務器（具有多個進程），然后可以創建一個簡單的隊列，該隊列將收集所有增量。 請記住，TCP / IP將確保您以生成Web套接字請求的順序來獲取它們。 該隊列將向數據庫發出/同步請求。 在許多服務器的情況下，應用擴展會更加復雜。 然后，簡單的應用程序隊列將被您的數據庫（和適當的隔離級別）或redis或Rabbitmq取代。 PS。 Socket.io是一個不錯的選擇。

使用Socket.IO實時顯示點擊計數器的應用

問題描述

2 個解決方案

解決方案1
1 2017-09-30 11:25:33

解決方案2
0 2017-09-30 10:34:29

使用Socket.IO實時顯示點擊計數器的應用

問題描述

2 個解決方案

解決方案1 1 2017-09-30 11:25:33

解決方案2 0 2017-09-30 10:34:29

解決方案1
1 2017-09-30 11:25:33

解決方案2
0 2017-09-30 10:34:29