событие сбой моего браузера - PullRequest
Новая
       14

событие сбой моего браузера

0 голосов
/ 06 марта 2012

Ну, мое использование источника событий приводит к сбою моего браузера.

У меня есть простая страница с таблицей состояний и javascript, который слушаетсервер отправил событие для обновления.Я использую jquery.eventsource для прослушивания, jQuery версии 1.6.2, и я использую Firefox 10 в качестве браузера.На сервере я использую python 2.7.2 и cherrypy 3.2.2

Если я оставлю страницу состояния работающей и не обновлю ее, то, похоже, все в порядке.Если я обновлю страницу несколько раз (15 по последнему счету) или перейду с и на страницу несколько раз, то через минуту или около того произойдет сбой браузера.

Что может быть причиной этого сбоя?

Я пробовал это с помощью Google Chrome 17.0.963.78 m, но это выглядит нормально.Chrome не вылетает.

Это мой javascript (status.js): 

jQuery(document).ready(function()
           {
           jQuery.eventsource(
               {
               label: 'status-source',
               url: 'statusUpdates',
               dataType: 'json',
               open: function(data){},
               message: function(data)
               {
                   cell = jQuery('#'+data.htmlID);
                   cell.text(data.value);
               }
               }
           );
           }
          );

Это HTML: 

<html>
  <head>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
    <title>Event source test page</title>
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/jquery.eventsource.js" type="text/javascript"></script>
    <script src="js/status.js" type="text/javascript"></script>
  </head>
  <body>
    <table>
      <tr>
    <th>name</th><th>value</th>
      </tr>
      <tr>
    <td>Heads</td><td id="headval">4</td>
      </tr>
      <tr>
    <td>Hands</td><td id="handval">16</td>
      </tr>
      <tr>
    <td>Feet</td><td id="feetval">24</td>
      </tr>
      <tr>
    <td>Eyes</td><td id="eyeval">18</td>
      </tr>
      <tr>
    <td>Fingers</td><td id="fingerval">1</td>
      </tr>
    </table>
  </body>
</html>

Это сервер cherrypy

import cherrypy
import os
import Queue
import threading
import random
import json

class Server(object):

    def __init__(self):
        self.isUpdating = True
        self.statusUpdateList = Queue.Queue()
        self.populateQueue()
        threading.Timer(1, self.queuePopulationRepetition).start()

    def stop(self):
        self.isUpdating = False

    def queuePopulationRepetition(self):
        self.populateQueue()
        if self.isUpdating:
            threading.Timer(1, self.queuePopulationRepetition).start()

    def populateQueue(self):
        self.statusUpdateList.put(json.dumps({ 'htmlID':'headval', 'value':random.randint(0,50) }))
        self.statusUpdateList.put(json.dumps({ 'htmlID':'handval', 'value':random.randint(0,50) }))
        self.statusUpdateList.put(json.dumps({ 'htmlID':'feetval', 'value':random.randint(0,50) }))
        self.statusUpdateList.put(json.dumps({ 'htmlID':'eyeval', 'value':random.randint(0,50) }))
        self.statusUpdateList.put(json.dumps({ 'htmlID':'fingerval', 'value':random.randint(0,50) }))

    @cherrypy.expose
    def index(self):
        f = open('index.html', 'r')
        indexText = '\n'.join(f.readlines())
        f.close()
        return indexText

    @cherrypy.expose
    def statusUpdates(self, _=None):
        cherrypy.response.headers["Content-Type"] = "text/event-stream"
        self.isViewingStatus = True
        if _:
            data = 'retry: 400\n'
            while not self.statusUpdateList.empty():
                update = self.statusUpdateList.get(False)
                data += 'data: ' + update + '\n\n'
            return data
        else:
            def content():
                update = self.statusUpdateList.get(True, 400)
                while update is not None:
                    data = 'retry: 400\ndata: ' + update + '\n\n'
                    update = self.statusUpdateList.get(True, 400)
                    yield data
            return content()
    statusUpdates._cp_config = {'response.stream': True, 'tools.encode.encoding':'utf-8'}                


if __name__ == "__main__":

    current_dir = os.path.dirname(os.path.abspath(__file__))

    cherrypy.config.update({'server.socket_host': '0.0.0.0',
                             'server.socket_port': 8081,
                            })

    conf = {
            "/css" : {
                "tools.staticdir.on": True,
                "tools.staticdir.dir": os.path.join(current_dir, "css"),
                },
            "/js" : {
                "tools.staticdir.on": True,
                "tools.staticdir.dir": os.path.join(current_dir, "js"),
                },
            "/images" : {
                "tools.staticdir.on": True,
                "tools.staticdir.dir": os.path.join(current_dir, "images"),
                },
        }

    cherrypy.quickstart(Server(), "", config=conf)

1 Ответ

2 голосов
/ 16 апреля 2012

Насколько я могу судить, именно плагин jQuery сбивает браузер.Я переписал javascript для использования простого EventSource объекта, и это, похоже, решило проблему. 

jQuery(document).ready(function()
                       {
                           var source = new EventSource('statusUpdates');
                           source.addEventListener('message', 
                                                   function(receivedObject)
                                                   {
                                                       var data = jQuery.parseJSON(receivedObject.data);
                                                       var cell = jQuery('#'+data.htmlID);
                                                       cell.text(data.value);
                                                       var status = cell.siblings(':last');
                                                       status.removeClass();
                                                       status.addClass(data.status);
                                                   }, false);

                       }
                   );
...