使用 Socket.IO 实时显示点击计数器的应用
Posted
技术标签:
【中文标题】使用 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 实时显示点击计数器的应用的主要内容，如果未能解决你的问题，请参考以下文章
使用 angularjs 和 socket.io 实时保存和显示评论
如何使用 node.js、socket.io 和 mysql 显示实时数据？
如何将 socket.io-client 导入每个组件？ [复制]