正文 

当前位置： 首页 > 问答 >

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

     2023-03-07     31

关键词：

【中文标题】使用 Socket.IO 实时显示点击计数器的应用【英文标题】：App with the counter of clicks displayed in real time using Socket.IO 【发布时间】：2018-03-12 02:54:57 【问题描述】：

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

这样可以在应用中实时看到这个计数器吗？

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

【问题讨论】：

你熟悉node.js和socket.io吗？ 我知道 node.js，但对 socket.io 有点遗憾，我一点也不熟悉。我想在上面描述的应用程序中练习节点、角度和套接字。 【参考方案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 安装 节点服务器.js

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

http://127.0.0.1:89/

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

【讨论】：

非常感谢！您能否告诉我是否可以在每次点击后比较计数器（我已经制作了两个独立的计数器）...例如，如果值高于第二个，则将计数器的名称设为绿色。 @PawełStanecki 是的，当然！我建议使用房间或命名空间来做到这一点...请看here 太棒了！感谢您的所有提示！【参考方案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 有什么好的教程或文档吗？ 官方文档似乎不错（您在我的回复中有链接）。除了看这里：***.com/questions/4094350/….

如何使用 Socket.io 实时更新大量数据

】如何使用Socket.io实时更新大量数据【英文标题】：HowtokeepalargesetofdatauptodateinrealtimeusingSocket.io【发布时间】：2021-04-1910:32:45【问题描述】：我正在编写一个具有多种用户类型的系统，该系统被授予不同级别的访问权限，以在数... 查看详情

使用 angularjs 和 socket.io 实时保存和显示评论

】使用angularjs和socket.io实时保存和显示评论【英文标题】：Saveanddisplaycommentinreal-timeusingangularjsandsocket.io【发布时间】：2018-02-2001:52:06【问题描述】：我对@9​​87654321@有疑问。在我的代码router.post(/comment,...)中将用户cmets保存在数... 查看详情

使用node.js+socket.io搭建websocket实时应用

Web领域的实时推送技术，也被称作Realtime技术。这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新。它有着广泛的应用场景，比如在线聊天室、在线客服系统、评论系统、WebIM等。作者：潘良虎链接：https://www... 查看详情

如何使用 node.js、socket.io 和 mysql 显示实时数据？

】如何使用node.js、socket.io和mysql显示实时数据？【英文标题】：howtoshowreal-timedatausingnode.js,socket.ioandmysql?【发布时间】：2018-12-0605:50:06【问题描述】：我是Node.js的新手，正在尝试向网页显示实时数据。我尝试做的是首先通过URL插... 查看详情

使用androidnodejs和socket.io创建一个实时聊天应用程序(代码片段)

...聊天或通知系统等。在本文中，我们将向您展示如何使用androidnodeJs和Socket.io构建一个实时聊天应用程序入门我们的聊天应用分为两部分：1-服务器端& 查看详情

socket.io vs swr 用于更新实时内容

...【发布时间】：2021-01-2218:38:03【问题描述】：我目前正在使用next.js构建一个Web应用程序，它需要跨设备实时更新，例如，如果有人加入了一个群组，则需要立即向该群组的所有现有成员显示。目前，我最初是在页面加载时为用... 查看详情

使用 Docker 时 Socket IO 响应慢

】使用Docker时SocketIO响应慢【英文标题】：SlowSocketIOresponsewhenusingDocker【发布时间】：2021-04-2507:24:54【问题描述】：我有一个内置在Flask中的Web应用程序，其中捕获推文（使用Tweepy库）并显示在前端。我使用SocketIO在前端实时显示... 查看详情

如何将 socket.io-client 导入每个组件？ [复制]

...个带有聊天功能的应用，并且我有一个连接了多少用户的计数器我的问题是，当只有一个用户连接时，计数器显示3。为什么3？因为我有3个组件，并且我在每个类似的组 查看详情

实时应用：Socket.io vs Pusherapp

】实时应用：Socket.iovsPusherapp【英文标题】：Realtimeapps:Socket.iovsPusherapp【发布时间】：2011-04-2200:58:51【问题描述】：在Socket.io和Pusherapp之间进行选择时，您会考虑哪些因素？重要的考虑因素包括：与现有系统（如rails/django）的集... 查看详情

将 socket.io 与 expressjs 应用程序一起使用的最佳方法是啥？

】将socket.io与expressjs应用程序一起使用的最佳方法是啥？【英文标题】：whatisthebestwaytousesocket.iowithexpressjsapp?将socket.io与expressjs应用程序一起使用的最佳方法是什么？【发布时间】：2022-01-0213:37:04【问题描述】：我想用socket.io编... 查看详情

socket.io中文文档

...的nodejs，它的目标是构建可以在不同浏览器和移动设备上使用的实时应用。它会自动根据浏览器从WebSocket、AJAX长轮询、Iframe流等等各种方式中选择最佳的方式来实现网络实时应用，非常方便和人性化，而且支持的浏览器最低达IE... 查看详情

设计实时 Web 应用程序（Node.js 和 socket.io）

】设计实时Web应用程序（Node.js和socket.io）【英文标题】：Designingreal-timewebapplication(Node.jsandsocket.io)【发布时间】：2012-05-3008:35:40【问题描述】：我想问一些好的做法。我有一个Node.js(Express)Web服务器和socket.io推送服务器（以防技... 查看详情

socket.io：没有触发断开事件

...2012-05-0717:23:23【问题描述】：我做了一个简单的实时访客计数器。您可以从thisrepository下载。服务器上的断开连接事件（即使在浏览器关闭后）永远不会被触发。server.js是：(function()varapp,count,express,io;express=requi 查看详情

带有 socket.io 和后端 php 的 Angular

...:16:00【问题描述】：我正在开发实时应用程序（聊天）并使用angular，我的后端是php(codeigniterrestapi)用于mongodb中的数据库我在某处听说socket.io是套接字的最佳库（实时使用），我看到socket.io主要与node.js 查看详情

在nodejs socket.io中显示连续连接消息

...【发布时间】：2019-01-1221:07:17【问题描述】：我正在尝试使用laravel开发一个实时聊天应用程序。我面临一个问题。当我运行“nodeindex.js”时，命令提示符中不断显示“已建立连接”消息。我的index.js文件是：varapp=require(\'e 查看详情

使用 Socket.IO 的主要场景是啥

】使用Socket.IO的主要场景是啥【英文标题】：WhatisthemajorscenariotouseSocket.IO使用Socket.IO的主要场景是什么【发布时间】：2013-09-0609:10:38【问题描述】：我只是想知道为什么以及我们需要Socket.IO的应用程序或案例。我是一个知名开源... 查看详情

一个关于vue+mysql+express的全栈项目------实时聊天部分socket.io(代码片段)

...websocket，为了快速开发，本项目我们采用socket.io（客户端使用socket.io-client）Socket.io是一个WebSocket库，包括了客户端的js和服务器端的nodejs，它的目标是构建可以在不同浏览器和移动设备上使用的实时应用。它会自动根据浏览器从... 查看详情

使用 socket.io 提供静态文件的问题

】使用socket.io提供静态文件的问题【英文标题】：issuewithservingstaticfileswithsocket.io【发布时间】：2014-01-0521:07:15【问题描述】：我正在创建一个用户可以登录的网络应用程序（密码/用户名）。登录后，他可以选择2个可用应用程序... 查看详情