Использование сокетов для входа в систему нажмите

Question

Я очень новичок в веб-сокетах. Я хотел бы быть в состоянии создать простой веб-приложение, которое регистрирует количество раз кнопка была нажата:

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

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

Я знаю, что я могу обновить DIV со значением с помощью JavaScript/JQuery, но как я могу сохраните это через plaintext/database и отобразите живой результат количества нажатий кнопки.

Например, если browser A открыт и текущий отсчет 5 и browser B открывается и нажимает на кнопку, счетчик будет обновить до 6 на обоих браузерах.

Answer 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 и datebase соединения на тот же файл вы можете вызвать его так:

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

    } 
</script> 

Answer 2

Для этого вам понадобятся серверные серверы и стойкое хранилище WebSocket. Затем вам нужен механизм для уведомления бэкэнда клика и механизма уведомления обо всех подключенных браузерах обновления.

Для уведомлений это идеально подходит для публикации/подписки (PubSub).

Посмотрите на пример, как это сделать, используя WebSockets и AutobahnJS в браузере и AutobahnPython на сервере. (Нет гарантии, что вы сможете выполнить демонстрацию напрямую, как описано в настоящий момент, так как в рамках проекта Autobahn происходят большие изменения, и обновления продолжаются, но это даст вам представление об основном шаблоне.)

В зависимости от того, какой тип бэкэнд-языка вы используете, вы можете посмотреть alternative implementations WAMP, протокол, который эти библиотеки используют для шаблона PubSub. Их немало, и один из них может подходить вам.

(Полное раскрытие:. Я работаю Tavendo, проект сопровождающие для проектов Autobahn WebSocket)

PS: Вот code for a demo делают именно то, что вы хотите, в том числе сохраняющихся данных бэкэнда в базе данных Oracle. Однако это определенно в настоящее время не работает, а работа над следующей версией Crossbar.io продолжается.