使用套接字记录按钮按下答案

【问题标题】：Using sockets to log a button press使用套接字记录按钮按下
【发布时间】：2014-03-23 15:34:51
【问题描述】：

我对网络套接字非常陌生。我希望能够创建一个简单的网络应用程序来记录按钮被点击的次数：

<button>click</button>
<div id="counter"></div>

<script>
$(function() {
    $('button').click(function() {
        $('div#counter').html(function(i, val) {
            return val*1 + 1
        });
    });
});
</script>

我知道我可以使用 JavaScript/jQuery 使用值更新 div，但我如何通过纯文本/数据库存储它并显示按钮被点击次数的实时输出。

例如，如果browser A 已打开且当前计数为5 并且browser B 打开并单击该按钮，则计数将在两个浏览器上更新为6。

【问题讨论】：

标签： javascript jquery node.js websocket socket.io

【解决方案1】：

你需要使用服务端语言，纯js不行，php我可以

<button onclick="myFunction()">click</button>

<script>
function myFunction()
{
   <?php
        $conection="connection values";
        $sql="update some_table set somevalue=somevalue+1";
        //execute query

    ?>
}
</script>

或者你不想在同一个文件上拥有 php 代码和数据库连接，你可以像这样调用它

<script>
   function myFunction(){
       $.get("somepage.php");
       return false;

   }
</script>

【讨论】：

我希望使用 socket.io/node.js。使用 PHP，您必须连接到数据库才能调用数据，这在所有当前打开的没有 Web 套接字的浏览器中都不一致。

【解决方案2】：

你需要一些 WebSocket 服务器后端和持久存储。然后你需要一个机制来通知后端点击，再加上一个机制来通知所有连接的浏览器更新。

对于通知，这非常适合发布/订阅 (PubSub)。

查看this tutorial 的示例，了解如何在浏览器中使用 WebSockets 和 AutobahnJS 以及在服务器上使用 AutobahnPython。（由于 Autobahn 项目正在发生重大变化，并且更新正在进行中，因此无法保证您能够按照目前的描述直接执行演示，但它会让您对基本模式有所了解。）

根据您使用的后端语言类型，您可能需要查看 WAMP 的alternative implementations，这是上述库用于 PubSub 模式的协议。有很多，其中一个可能适合您的需要。

（完全披露：我在 Tavendo 工作，它是 Autobahn WebSocket 项目的项目维护者。）

PS：code for a demo 完全按照您的意愿行事，包括将后端数据持久保存在 Oracle 数据库中。但是，在 Crossbar.io 的下一个版本的工作仍在继续时，这绝对是目前无法操作的。

【讨论】：