根据Firebase管理员值事件更改Dom元素 [英] change Dom element based on firebase admin value events

问题描述

我有一个简单的HTML页面打印出来的一个Servlet。在这里，我已经设置了firebase管理员sdk，并为路径设置了一个值事件侦听器。

当事件触发时，我希望更改一个Div元素并在其中显示结果。

编辑：侦听器在进一步的日志测试上工作。

但是我仍然不知道如何反映div元素内部的变化，因为Listeners是异步的。这很可能是为什么脚本不能正常工作。

有人可以指导我做什么。代码如下：

  import java.io.IOException; 
 import java.io.InputStream; 
 import java.io.PrintWriter; 
 import java.text.SimpleDateFormat; 
 import java.util.ArrayList; 
 import java.util.Collections; 
 import java.util.Comparator; 
 import java.util.Date; 
 
 import javax.servlet.ServletException; 
 import javax.servlet.annotation.WebServlet; 
 import javax.servlet.http.HttpServlet; 
 import javax.servlet.http.HttpServletRequest; 
导入javax.servlet.http.HttpServletResponse; 
 
导入com.google.firebase.FirebaseApp; 
导入com.google.firebase.FirebaseOptions; 
 import com.google.firebase.auth.FirebaseCredentials; 
 import com.google.firebase.database.DataSnapshot; 
 import com.google.firebase.database.DatabaseError; 
 import com.google.firebase.database.DatabaseReference; 
 import com.google.firebase.database.FirebaseDatabase; 
 import com.google.firebase.database.ValueEventListener; 
 
 @WebServlet（/ WebWaitlistViewServelet）
 public class WebWaitlistViewServelet扩展HttpServlet {
 private static final long serialVersionUID = 1L; 
 
 public WebWaitlistViewServelet（）{
 super（）; 
 
 
保护无效doGet（HttpServletRequest请求，HttpServletResponse响应）抛出ServletException，IOException {
 
 PrintWriter pw = response.getWriter（）; 
 
尝试{
 
 String cityName = request.getParameter（city）; 
 
 String restId = request.getParameter（restid）; 
 
字符串userId = request.getParameter（userid）; 
 
 if（cityName == null || restId == null || userId == null）{
 System.out.println（Error getting values）; 
 return; 
} else {
 System.out.println（cityName ++ restId ++ userId）; 
} 
 
 
 pw.println（< HTML>）; 
 
 pw.println（< HEAD>）; 
 
 pw.println（< script>）; 
 
 pw.println（function changePosition（position）{document.getElementById（\positionInList\）。innerHTML = position};）; 
 
 pw.println（function changeTimeTillTurn（timetillturn）{document.getElementById（\timeTillTurn\）。innerHTML = timetillturn};）; 
 
 pw.println（function showTimeTillTurn（）{document.getElementById（\timeDiv\）。style.display = \visible \};）; 
 
 pw.println（function hideTimeTillTurn（）{document.getElementById（\timeDiv\）。style.display = \hidden\};）; 
 
 pw.println（< / script>）; 
 
 pw.println（< / HEAD>）; 
 
 pw.println（< BODY>）; 
 
 pw.println（< DIV align = \center \>）; 
 
 pw.println（< B>您在等待列表中的位置是：< / B>）; 
 
 pw.println（< / DIV>< br />）; 
 
 pw.println（< DIV id = \positionInList \align = \center \style = \color：blue \>）; 
 
 pw.println（正在加载...）; 
 
 pw.println（< / DIV>< br />）; 
 
 pw.println（< DIV id = \timeDiv\align = \center \>）; 
 
 pw.println（< B>直到轮到你的大概时间为：< / B>< span id = \timeTillTurn\style = \color：blue\\ \\ &的载量...< /跨度> 中）; 
 
 pw.println（< / DIV>）; 
 
 pw.println（< BODY>）; 
 
 pw.println（< / HTML>）; 
 
 pw.flush（）; 
 
 
 InputStream is = getServletContext（）。getResourceAsStream（/ WEB-INF / firebaseauth / firebase_admin_sdk_key.json）; 
 
 //使用服务帐户初始化应用，授予管理员权限
 FirebaseOptions选项=新FirebaseOptions.Builder（）
 .setCredential（FirebaseCredentials.fromCertificate（is））
 .setDatabaseUrl（https://restaurantrepo.firebaseio.com）
 .build（）; 
尝试{
 FirebaseApp.initializeApp（options）; 
} catch（Exception e）{
 // 
} 
 
 
 
 //作为管理员，应用可以读取并写入所有的数据，无论安全规则
 DatabaseReference waitlistRef = FirebaseDatabase.getInstance（）。getReference（）。child（cityName）.child（restId）.child（waitlist）; 
 
比较器< WaitlistedPerson> （）} $ {
 $ O $ {$ b $ public int compare（WaitlistedPerson lhs，WaitlistedPerson rhs）{
 //排序升序...输入的时间越大， （lhs.getTimeentered（））< rhs.getTimeentered（））{
 / 
 //在等待列表
上的位置越低， /如果输入的时间较低，则保持列表
中较高的人返回-1; 
} else if（lhs.getTimeentered（）== rhs.getTimeentered（））{
 //如果输入的时间相同，则有两种情况可能
 // 1 ..一个人远程进入，一个进入resto POS ...在这种情况下，优先进入POS用户
 // 2 ..两个人都远程进入...在这种情况下，给予优先（最初使用我们的应用程序的人）
 // 
 //永远不会发生的情况是
 // 1 ..两个用户名相同相同的时间..不能发生作为第二个条目只是覆盖旧的条目
 // 2 ..两个人在POS输入同一时间...不能发生，因为resto主机只能进入一方（！）lhs.isRemotelyEntered（）&& rhs.isRemotelyEntered（））{
 // Log .d（FragmentCreate，lhs userid+ lhs.getUserid（）+lhs remotelyentered+ lhs.isRemotelyEntered（））; 
 //Log.d(\"FragmentCreate\",\"rhs userid+ rhs.getUserid（）+rhs remotelyentered+ rhs.isRemotelyEntered（））; 
返回-1; 
} else if（lhs.isRemotelyEntered（）&& rhs.isRemotelyEntered（））{
 //返回最低用户ID 
 //用户ID格式为Uxx ... so得到从字符串的索引1开始的xx部分，并得到数字
 int lhsuserid = Integer.parseInt（lhs.getUserid（）。substring（1））; 
 int rhsuserid = Integer.parseInt（rhs.getUserid（）。substring（1））; 
 
 //Log.d(\"FragmentCreate，userids是lhsuserid+ lhsuserid +rhsuserid+ rhsuserid）; 
 
 //不要试图使用字符串compareto函数，因为这会给出错误的结果
 // U11将优先于字符串compareto中的U4，因为1的字典顺序较小
 //因此永远不要使用词典排序。 
 
 //用户ID永远不会相等，因为两个远程输入的用户永远不会有两个条目（不能...因为firebase是不可能的）
 
 if（ lhsuserid< rhsuserid）{
 return -1; 
}否则if（lhsuserid == rhsuserid）{
 //在现实生活中永远不会发生...两个远程进入的用户永远不会有相同的ID有时只是为了安全
返回0; 
} else {
 return 1; $！
 
 $ b} else if（！lhs.isRemotelyEntered（）&&！rhs.isRemotelyEntered（））{
 //在POS中输入的时间都是
 //在现实生活中永远不会发生... 
 //这个只是为了测试场景，万一我搞砸了，给出错误的输入
 return 0; 
} else {
 //Log.d(\"FragmentCreate\",\"lhs userid+ lhs.getUserid（）+lhs remotelyentered+ lhs.isRemotelyEntered（））; 
 //Log.d(\"FragmentCreate\",\"rhs userid+ rhs.getUserid（）+rhs remotelyentered+ rhs.isRemotelyEntered（））; 
返回1; 
} 
} else {
 return 1; 
} 
} 
}; 
 
 ArrayList< WaitlistedPerson> listOfPeople = new ArrayList<>（）; 
 
 ValueEventListener eventListener = new ValueEventListener（）{
 $ b $ @Override 
 public void onCancelled（DatabaseError error）{
 pw.println（< script> ; hideTimeTillTurn（）;< /脚本>中）; 
 pw.println（< script> changePosition（'Sorry，some error occured'）;< / script>）; 
 System.out.println（Sorry。some error occured）; 
 
 $ b @Override 
 public void onDataChange（DataSnapshot dataSnapshot）{
 
 int positionCounter = 0; 
 
 if（dataSnapshot.getChildrenCount（）== 1 || dataSnapshot.getChildrenCount（）== 0）{
 //Log.d(\"FragmentCreate\"，这表示餐厅可能关闭并从列表中删除所有客户）; 
 pw.println（< script> hideTimeTillTurn（）;< / script>）; 
 pw.println（< script> changePosition（'您不再处于等待列表'）;< / script>）; 
 System.out.println（你不在候补列表）; 
} else {
 
 if（dataSnapshot.hasChild（userId））{
 
 double averageWaitTime = 0.0d; 
 
 long timeEnteredInMillis = 0; 
 
 listOfPeople.clear（）; 
 
可重用< DataSnapshot> peopleInList = dataSnapshot.getChildren（）; （DataSnapshot currentPerson：peopleInList）{
 
 if（currentPerson.getKey（）。equals（dummy））{
 continue; 
 
 $ b $ if（currentPerson.getKey（）。equals（userId））{
 //这是我们的节点....打破循环，享受使用计数器
 averageWaitTime = currentPerson.child（averagewaittimeperparty）。getValue（Double.class）; 
 timeEnteredInMillis = currentPerson.child（timeentered）。getValue（Long.class）; 
 listOfPeople.add（new WaitlistedPerson（currentPerson））; 
} else {
 listOfPeople.add（new WaitlistedPerson（currentPerson））; 
 
 
 
 $ b //使用我们的自定义比较器对列表进行排序并获得索引
 
 Collections.sort（listOfPeople， sortComparator）; 
 
 //找到用户现在的位置
 
（WaitlistedPerson person：listOfPeople）{
 ++ positionCounter; 
 if（person.getUserid（）。equals（userId））{
 break; 
} 
} 
 
 double timetillturn = Math.round（averageWaitTime *（（double）positionCounter））; 
 
 long timeShouldComeAt = timeEnteredInMillis +（long）（timetillturn * 60000）; 
 
日期timeWhenTurnArrives =新日期（timeShouldComeAt）; 
 
 SimpleDateFormat sdf = new SimpleDateFormat（HH：mm）; 
 
 pw.println（< script> showTimeTillTurn（）;< / script>）; 
 pw.println（< script> changePosition（'+ positionCounter +'）;< / script>）; 
 pw.println（< script> changeTimeTillTurn（'+ sdf.format（timeWhenTurnArrives）+'）;< / script>）; 
 System.out.println（positionCounter ++ sdf.format（timeWhenTurnArrives））; 
 $ b} else {
 pw.println（< script> hideTimeTillTurn（）;< / script>）; 
 pw.println（< script> changePosition（'您不再处于等待列表'）;< / script>）; 
 System.out.println（你不在候补列表）; 
 
} 
 
} 
 
} 
 
}; 
 
 waitlistRef.addValueEventListener（eventListener）; 
 
 catch（Exception e）{
 e.printStackTrace（）; 
} finally {
 try {
 pw.close（）; 
} catch（Exception e）{
 //此处不做任何事
} 
} 
 
 
} 
 
保护无效doPost（HttpServletRequest请求，HttpServletResponse响应）抛出ServletException，IOException {
 doGet（request，response）; 
 
 
 $ b  

解决方案

所以我设法用JSP来解决这个问题，而不是使用Servelet。

在任何一种情况下，解决方案都是把所有的逻辑转换成一个JavaScript函数。然后调用上述函数的身体负载。

  onload = callthefunction（）
  

Firebase监听器已从Java转换为JavaScript版本：

  off（）
  

这样就需要调用ajax或任何东西，需要改变的元素可以直接从JavaScript
改变

I have a simple HTML page printed out inside a Servlet. Here I have setup firebase admin sdk and have set a value event listener for a path.

When the events fire, I wish to change a Div element and display the results there.

EDIT: The listener does work on further testing with logs.

But I still do not know how to reflect the changes inside the div element as the Listeners are Asynchronous. That's most likely why the script isn't working.

Can someone please guide me as to what I should do. The code is as follows:

 import java.io.IOException;
 import java.io.InputStream;
 import java.io.PrintWriter;
 import java.text.SimpleDateFormat;
 import java.util.ArrayList;
 import java.util.Collections;
 import java.util.Comparator;
 import java.util.Date;

 import javax.servlet.ServletException;
 import javax.servlet.annotation.WebServlet;
 import javax.servlet.http.HttpServlet;
 import javax.servlet.http.HttpServletRequest;
 import javax.servlet.http.HttpServletResponse;

 import com.google.firebase.FirebaseApp;
 import com.google.firebase.FirebaseOptions;
 import com.google.firebase.auth.FirebaseCredentials;
 import com.google.firebase.database.DataSnapshot;
 import com.google.firebase.database.DatabaseError;
 import com.google.firebase.database.DatabaseReference;
 import com.google.firebase.database.FirebaseDatabase;
 import com.google.firebase.database.ValueEventListener;

 @WebServlet("/WebWaitlistViewServelet")
 public class WebWaitlistViewServelet extends HttpServlet {
private static final long serialVersionUID = 1L;

public WebWaitlistViewServelet() {
    super();
}

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    PrintWriter pw = response.getWriter();

    try {

        String cityName=request.getParameter("city");

        String restId = request.getParameter("restid");

        String userId = request.getParameter("userid");

        if(cityName == null || restId == null || userId == null){
            System.out.println("Error getting values");
            return;
        }else{
            System.out.println(cityName+" "+restId+" "+userId);
        }


        pw.println("<HTML>");

            pw.println("<HEAD>");

                pw.println("<script>");

                    pw.println("function changePosition(position){ document.getElementById(\"positionInList\").innerHTML = position };");

                    pw.println("function changeTimeTillTurn(timetillturn){ document.getElementById(\"timeTillTurn\").innerHTML = timetillturn };");

                    pw.println("function showTimeTillTurn(){ document.getElementById(\"timeDiv\").style.display = \"visible\" };");

                    pw.println("function hideTimeTillTurn(){ document.getElementById(\"timeDiv\").style.display = \"hidden\" };");

                pw.println("</script>");

            pw.println("</HEAD>");

            pw.println("<BODY>");

                pw.println("<DIV align=\"center\">");

                    pw.println("<B>Your position in the waitlist is:</B>");

                pw.println("</DIV><br/>");

                pw.println("<DIV id=\"positionInList\" align=\"center\" style=\"color:blue\">");

                    pw.println("Loading...");

                pw.println("</DIV><br/>");

                pw.println("<DIV id=\"timeDiv\" align=\"center\">");

                    pw.println("<B>Approximate time till your turn is: </B><span id=\"timeTillTurn\" style=\"color:blue\">Loading...</span>");

                pw.println("</DIV>");

            pw.println("<BODY>");

        pw.println("</HTML>");

        pw.flush();


        InputStream is = getServletContext().getResourceAsStream("/WEB-INF/firebaseauth/firebase_admin_sdk_key.json");

        // Initialize the app with a service account, granting admin privileges
        FirebaseOptions options = new FirebaseOptions.Builder()
            .setCredential(FirebaseCredentials.fromCertificate(is))
            .setDatabaseUrl("https://restaurantrepo.firebaseio.com")
            .build();
        try {
            FirebaseApp.initializeApp(options);
        } catch (Exception e) {
            //
        }



        // As an admin, the app has access to read and write all data, regardless of Security Rules
        DatabaseReference waitlistRef = FirebaseDatabase.getInstance().getReference().child(cityName).child(restId).child("waitlist");

        Comparator<WaitlistedPerson> sortComparator = new Comparator<WaitlistedPerson>() {
            @Override
            public int compare(WaitlistedPerson lhs, WaitlistedPerson rhs) {
                //sort ascending... the bigger the time entered, the later the person has joined... thus the higher the time entered the lower the position
                //on waitlist
                if(lhs.getTimeentered()<rhs.getTimeentered()){
                    //if time entered is lower, keep the person higher in the list
                    return -1;
                }else if(lhs.getTimeentered()==rhs.getTimeentered()){
                    //if the time entered is the same, there are two cases possible
                    //1.. one person is remotely entered and one has entered at the resto POS... in this case, give priority to POS entered user
                    //2.. both people have remotely entered ... in this case, give preference to the person with lowest userid (he/she started using our app earlier)
                    //
                    //cases that will never happen are
                    //1.. two people with same userid entered remotely at same time .. can't happen as a second entry simply overwrites the old entry
                    //2.. two people with same time entered at POS ... can't happen as the resto host can only enter one party at a time..
                    if(!lhs.isRemotelyEntered() && rhs.isRemotelyEntered()){
                        //Log.d("FragmentCreate","lhs userid "+lhs.getUserid()+" lhs remotelyentered "+lhs.isRemotelyEntered());
                        //Log.d("FragmentCreate","rhs userid "+rhs.getUserid()+" rhs remotelyentered "+rhs.isRemotelyEntered());
                        return -1;
                    }else if(lhs.isRemotelyEntered() && rhs.isRemotelyEntered()){
                        //return the lowest user id
                        //userid is of format Uxx ... so get the xx part begining from index 1 of the string and get the number
                        int lhsuserid = Integer.parseInt(lhs.getUserid().substring(1));
                        int rhsuserid = Integer.parseInt(rhs.getUserid().substring(1));

                        //Log.d("FragmentCreate"," The userids are lhsuserid "+lhsuserid+" rhsuserid"+rhsuserid);

                        //Do not get tempted to use String compareto function as this will give wrong results
                        // U11 will get priority over U4 in string compareto due to 1 being lexicographically smaller
                        //Thus never use lexicographical sorting ever.

                        //The user ids can never be equal as two remotely entered users will never have two entries (can't... it's impossible due to firebase)

                        if(lhsuserid<rhsuserid){
                            return  -1;
                        }else if(lhsuserid==rhsuserid){
                            //can never happen in real life... two remotely entered users can never have same id ever... just made for safeguard
                            return 0;
                        }else{
                            return 1;
                        }

                    }else if(!lhs.isRemotelyEntered() && !rhs.isRemotelyEntered()){
                        //both entered at POS and have same time
                        //can never happen in real life...
                        //made this just for testing scenarios in case i screw up and give wrong inputs
                        return 0;
                    }else{
                        //Log.d("FragmentCreate","lhs userid "+lhs.getUserid()+" lhs remotelyentered "+lhs.isRemotelyEntered());
                        //Log.d("FragmentCreate","rhs userid "+rhs.getUserid()+" rhs remotelyentered "+rhs.isRemotelyEntered());
                        return 1;
                    }
                }else{
                    return 1;
                }
            }
        };

        ArrayList<WaitlistedPerson> listOfPeople = new ArrayList<>();

        ValueEventListener eventListener = new ValueEventListener(){

            @Override
            public void onCancelled(DatabaseError error) {
                pw.println("<script>hideTimeTillTurn();</script>");
                pw.println("<script>changePosition('Sorry, some error occured');</script>");
                System.out.println("Sorry. some error occured");
            }

            @Override
            public void onDataChange(DataSnapshot dataSnapshot) {

                int positionCounter=0;

                if(dataSnapshot.getChildrenCount()==1 || dataSnapshot.getChildrenCount() == 0 ){
                    //Log.d("FragmentCreate","This indicates that the restaurant probably closed down and removed all customers from the list");
                    pw.println("<script>hideTimeTillTurn();</script>");
                    pw.println("<script>changePosition('You are no longer in the waitlist');</script>");
                    System.out.println("You are no longer in the waitlist");
                }else{

                    if(dataSnapshot.hasChild(userId)){

                        double averageWaitTime=0.0d;

                        long timeEnteredInMillis=0;

                        listOfPeople.clear();

                        Iterable<DataSnapshot> peopleInList = dataSnapshot.getChildren();

                        for(DataSnapshot currentPerson : peopleInList){

                            if(currentPerson.getKey().equals("dummy")){
                                continue;
                            }

                            if(currentPerson.getKey().equals(userId)){
                                //This is our node.... break the loop and enjoy using the counter
                                averageWaitTime = currentPerson.child("averagewaittimeperparty").getValue(Double.class);
                                timeEnteredInMillis = currentPerson.child("timeentered").getValue(Long.class);
                                listOfPeople.add(new WaitlistedPerson(currentPerson));
                            }else{
                                listOfPeople.add(new WaitlistedPerson(currentPerson));
                            }

                        }

                        //sort the list using our custom comparator and the get the index

                        Collections.sort(listOfPeople,sortComparator);

                        //find the position of the user now

                        for(WaitlistedPerson person : listOfPeople){
                            ++positionCounter;
                            if(person.getUserid().equals(userId)){
                               break;
                            }
                        }

                        double timetillturn = Math.round(averageWaitTime * ((double)positionCounter));

                        long timeShouldComeAt = timeEnteredInMillis + (long)(timetillturn*60000);

                        Date timeWhenTurnArrives = new Date(timeShouldComeAt);

                        SimpleDateFormat sdf = new SimpleDateFormat("HH:mm");

                        pw.println("<script>showTimeTillTurn();</script>");
                        pw.println("<script>changePosition('"+positionCounter+"');</script>");
                        pw.println("<script>changeTimeTillTurn('"+sdf.format(timeWhenTurnArrives)+"');</script>");
                        System.out.println(positionCounter+" "+sdf.format(timeWhenTurnArrives));

                    }else{
                        pw.println("<script>hideTimeTillTurn();</script>");
                        pw.println("<script>changePosition('You are no longer in the waitlist');</script>");
                        System.out.println("You are no longer in the waitlist");

                    }

                }

            }

        };

        waitlistRef.addValueEventListener(eventListener);

    } catch (Exception e) {
        e.printStackTrace();
    }finally{
        try {
            pw.close();
        } catch (Exception e) {
            //do nothing here
        }
    }


}

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    doGet(request, response);
}

}

解决方案

So i managed to solve this using a JSP instead of a Servelet.

In either case, the solution was to tranfer all the logic to a JavaScript function. Then calling the said function on body load.

onload=callthefunction()

The firebase listeners were converted from java to the JavaScript version:

on()
off()

This way there is need to call ajax or anything and the elements that need to be changed can be directly altered from JavaScript

这篇关于根据Firebase管理员值事件更改Dom元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！