想象一下，我有一个只显示按钮的应用程序，并且用户可以点击这个按钮。在按钮下方有一个点击计数器。它将显示来自所有用户的所有点击的总和。这个想法类似于 cookie clicker 游戏，但我想让它像一个多人游戏。
这样可以在应用中实时看到这个计数器吗？
我想知道我是否可以在这里使用 Socket.IO。
【问题讨论】：
标签： javascript angularjs node.js socket.io
假设您知道如何运行节点应用程序，这里有一个非常基本的示例：
文件 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"
}
}
本地主机使用情况
然后打开浏览器并打开多个标签：
享受 :) 希望这会有所帮助。
【讨论】：
在 node.js 中，套接字连接（服务器端口）在子进程之间共享（集群模式：https://nodejs.org/api/cluster.html）。您还可以在多台机器之间扩展 Web 套接字 (https://socket.io/docs/using-multiple-nodes/)。 如果您要创建小型应用程序，您可能会有一台服务器（带有许多进程），然后您可以创建一个简单的队列来收集所有增量。请记住，TCP/IP 将确保您将按照生成的顺序获取 Web 套接字请求。该队列将向您的数据库发出/同步请求。 在许多服务器的情况下，应用程序扩展将更加复杂。然后简单的应用程序队列将被您的数据库（和适当的隔离级别）或例如替换。 redis 或rabbitmq。 PS。 Socket.io 是不错的选择。
【讨论】：