在不同的浏览器中同时显示相同的内容

时间:2018-07-04 11:46:10

标签: javascript php ajax

我正在开发一种数字游戏,用户将购买数字,两天后将抽出赢家。

我在后端使用PHP,在前端使用jQuery。

我的问题是,当绘图发生时,在不同浏览器上的用户看不到相同的数字,这些绘图数字是由PHP生成的。

我当时想也许我可以用PHP和Javascript来构建这些游戏,但这看起来并不容易。你们能建议一些替代方法吗?如何改进此代码以在不同的浏览器上显示相同的数字?

我的想法是不可能为每个请求生成一个随机数。也许我可以将数字保存在数据库中,然后在PHP中获取该数字,以便该数字对于每个请求都是唯一的。

实际的问题是在不同的浏览器中为每个用户创建相同的内容。任何帮助将不胜感激。

Javascript:

var myTimer = setInterval(checkDrawDate, 1000);

function checkDrawDate() {
      var today = new Date();
      var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
      var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
      var dateTime = date+' '+time;
      var x = new Date(dateTime);
      var y = new Date("{{$drawDate}}"); //this is laravel variable which contain drawdate e.g. 2017-07-05

      if(x >= y){
          drawNumber();
    }
}

function drawNumber(){
      $.get("{{ route('ajaxcomparepowerball') }}",{'gameId': gameid}, function(res){
       $('#mybets').html(res.html); 
     });
}

PHP:

public function ajaxDrawNumber(Request $req){
     return rand(0,49);
}

4 个答案:

答案 0 :(得分:6)

需要 Cron Job 来实现此功能。在特定时间绘制数字(在$drawDate之后)。因此,计划任务每​​天执行一次,请检查每个游戏的$drawDate是今天还是过去。如果条件为$drawDate <= now为真,则调用一个函数以生成随机抽奖号码rand(0,49),并将其保存到与匹配游戏的gameid(具有$drawDate <= now)相对应的数据库中。

通过这样做,将减少很多Javascript工作。在JS中,然后需要用gameid发出ajax请求,以从数据库中获取具有特定游戏抽奖号码的记录。如果找不到记录,则表示尚未绘制随机数。

我认为您正在使用Laravel,因此要在laravel visit here中安排任务。

答案 1 :(得分:2)

这里有一些可能的解决方案。

  • 如果您需要为用户实时修改相同的数据,我认为最好的选择是WebRTC,快速入门here。还有here一个简单的示例,它在客户端之间实时发送字符串。 如果您还需要与客户端交互的服务器,则可以使用server-sent events
  • 您可以使用WebSockets在浏览器和服务器之间执行双向通信。您可以发送和接收事件驱动的响应。使用数据库,您可以交流两个客户端。
  • 最简单的方法是使用数据库存储信息并执行ajax将数据发送到服务器(和数据库),并使用服务器发送的事件将数据发送到客户端。

服务器发送的基本事件示例

Javacript:

    var evtSource = new EventSource("myserver.php");
    evtSource.onmessage = function(e) {
    // listening for new messages here   

   alert(e.data)//  e.data is mynumber

    } 

Php(myserver.php)

<?php    
header('Cache-Control: no-cache');
header("Content-Type: text/event-stream\n\n");       

while (1) {

  //perform a query in your database with your driver
  $result = mysql_query("SELECT mynumber FROM mytable WHERE user = 1");
  $row = mysql_fetch_assoc($result);

    echo $row['mynumber'];//<-- sending mynumber to client    

  ob_end_flush();
  flush();
  sleep(1);// <-- this is every second, but you could fire this with ajax or some other event.

}

此代码将从服务器发送到正在监听的客户端的号码。如果用户进行了更改,则一种可能性是客户端发送ajax来更新数据库中的某些值。因此,与此同时,ajax 服务器可以将其作为更新发送给正在监听的客户端。这样,整个过程就完成了。

答案 2 :(得分:1)

我想您所需要的就是这个。每隔5秒或更短的时间调用一次函数,然后从服务器获取数据并在页面中对其进行更新。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp"
        android:text="Enter Knock Code"
        android:textColor="@color/black"
        android:textSize="15dp" />

    <LinearLayout
        android:id="@+id/knock_images"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/knock_view"
        android:gravity="center"
        android:orientation="horizontal"
        android:padding="5dp">

    </LinearLayout>


    <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/knock_view"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_centerInParent="true"
        android:layout_gravity="center"
        android:background="#c5c9cd"
        android:stretchColumns="*">


        <TableRow
            android:id="@+id/tableRow1"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_marginEnd="1dp"
            android:layout_marginRight="1dp"
            android:layout_marginTop="1dp"
            android:layout_weight="1">

            <Button
                android:id="@+id/button_1"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_marginLeft="1dp"
                android:layout_marginStart="1dp"
                android:background="#e9ebebeb"
                android:foreground="?attr/selectableItemBackgroundBorderless" />

            <Button
                android:id="@+id/button_2"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_marginLeft="1dp"
                android:layout_marginStart="1dp"
                android:background="#e9ebebeb"
                android:foreground="?attr/selectableItemBackgroundBorderless" />
        </TableRow>

        <TableRow
            android:id="@+id/tableRow2"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_marginBottom="1dp"
            android:layout_marginEnd="1dp"
            android:layout_marginRight="1dp"
            android:layout_weight="1">

            <Button
                android:id="@+id/button_3"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_marginLeft="1dp"
                android:layout_marginStart="1dp"
                android:layout_marginTop="1dp"
                android:background="#e9ebebeb"
                android:foreground="?attr/selectableItemBackgroundBorderless" />

            <Button
                android:id="@+id/button_4"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_marginLeft="1dp"
                android:layout_marginStart="1dp"
                android:layout_marginTop="1dp"
                android:background="#e9ebebeb"
                android:foreground="?attr/selectableItemBackgroundBorderless" />
        </TableRow>

    </TableLayout>


    <RelativeLayout
        android:id="@+id/knock_bottom_buttons"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true">

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_alignTop="@+id/button_ok"
            android:background="#e0e0e0" />

        <Button
            android:id="@+id/button_reset"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toLeftOf="@+id/button_ok"
            android:layout_toStartOf="@+id/button_ok"
            android:background="?selectableItemBackground"
            android:text="reset"
            android:textColor="@color/black"
            android:textStyle="bold" />

        <Button
            android:id="@+id/button_ok"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:background="?selectableItemBackground"
            android:text="ok"
            android:textColor="@color/black"
            android:textStyle="bold" />
    </RelativeLayout>

</RelativeLayout>

并且不要忘记在将数字保存到服务器之前对数据进行交叉检查。

希望有帮助。!!!

答案 3 :(得分:1)

要保存和维护用户状态,可以使用诸如Aerospike之类的键值存储。在键值存储中保存和检索数据非常容易。在上述情况下,我们只需要使用gameId,userId和date生成唯一键即可。并根据唯一密钥保存用户数据。

要开始使用Aerospike php客户端,请遵循Aerospike php client

如果存在针对特定用户的唯一ID的数据,则仅将其返回,否则创建新的随机数,将其保存为唯一键并返回。创建唯一密钥时请小心。而不是使用服务器端的日期时间,请在ajax呼叫请求中发送日期,这样时区就不会有任何问题。这将始终是用户的时区,并且如果服务器位于不同的时区并且用户位于不同的时区将不会有任何问题。

function drawNumber(){
  $.get("{{ route('ajaxcomparepowerball') }}",{'gameId': gameid,'date':user-timezone-date}, function(res){
   $('#mybets').html(res.html); 
 });
}

此处的“ user-timezone-date”应为固定日期格式,例如“ MM-dd-yy”,它将指示同一天。生成唯一密钥时,不应包括小时或秒,否则在检索用户状态时;产生特定唯一性的方法将每小时或每秒钟更改一次,而这样做的整个目的将被粉碎。

我是StackOverFlow的新手,所以我无法评论答案。对于玉米工作,如果服务器和用户所在的时区不同,我们也必须注意时区。否则,用户会在一天结束之前看到不同的随机数。请通过评论来改善答案,并始终欢迎提出建议。