title: webrtc with python show realtime Temperature on a Web page
body: <p>my project based on a comparison between Websocket and Webrtc .until now its works very well using Websocket , It is a python script that runs a Websocket server  to send the realtime data temperature  to the client.What its next to do  is the same thing using Webrtc :I know that
  The Webrtc is based on a triangular and peer-to-peer architecture in which a central server is used to connect two peers wishing to exchange  data streams(temperature)but I'm a beginner and i don't know what schould i change in my coding way.
  i was checking out the project"webRTC without browser", but it doesn't describe what I'm looking for. . Is there a way to do it with the current setup or some examples like this project? i will be greatfull if i find someone cann help me to do it rignt .</p>
  
  <p>servertemperature.py</p>
  
  <pre><code>import time
  import tornado.httpserver
  import tornado.websocket
  import tornado.ioloop
  from tornado.ioloop import PeriodicCallback
  import tornado.web
  
  class WSHandler(tornado.websocket.WebSocketHandler):
      def check_origin(self,origin):
          return True
      def open(self):
          self.callback = PeriodicCallback(self.send_temp, 120)
          self.callback.start()
  
      def send_hello(self):
          self.write_message('hello')
  
      def on_message(self, message):
          pass
  
      def on_close(self):
          self.callback.stop()
          print "Closed Connection"
  
      def send_temp(self):
  
  
          #Change this to the file of your temp probe!
  
          tfile = open("/sys/bus/w1/devices/28-03139779f433/w1_slave")
          text = tfile.read()
          tfile.close()
          temperaturedata = text.split("\n")[1].split(" ")[9]
          temperature = float(temperaturedata[2:])
          temperature = temperature / 1000 * 9 / 5 + 32
          self.write_message("Current Temperature: {0:.2f}F".format(temperature))
          print temperature
          time.sleep(1)
  
  
  application = tornado.web.Application([(r'/', WSHandler),])
  
  if _name_ == "_main_":
      http_server = tornado.httpserver.HTTPServer(application)
      http_server.listen(8080)
      print 'Server begin'
      tornado.ioloop.IOLoop.instance().start()
  </code></pre>
  
  <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta name="viewport" content="width=device-width, user-scalable=no" /&gt;
          &lt;title&gt;BlenderWebController&lt;/title&gt;
          &lt;script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"&gt;&lt;/script&gt;
          &lt;link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" /&gt;
          &lt;script&gt;
                  //Change this to the locla ip of your pi
                  var address = "ws://10.61.150.226:8080/"
                  $(document).ready(function(){
                      try {
                              var s = new WebSocket(address);
                              s.onopen = function (e) {
                                  $("#Status").slideUp();
                              };
                              s.onclose = function (e) {
                                  $("#Status &gt; div &gt; p").text("Not Connected");
                                  $("#Status").slideDown();
                              };
                              s.onmessage = function (e) {
                                  $("#templog &gt; li").removeClass("hightlight");
                                  $("#templog").prepend('&lt;li class="list-group-item hightlight"&gt;&lt;/li&gt;');
                                  $("#templog &gt; li").first()
                                  .hide()
                                  .text( e.data + ' @ ' + (new Date()).toLocaleTimeString() )
                                  .slideDown("slow");
                              };
                              s.onerror = function (e) {
                                  $("#Status &gt; div &gt; p").text("Something Died!");
                                  $("#Status").slideDown();
                              };
                      } catch (ex) {
                          $("#Status &gt; div &gt; p").text("Something Died!");
                          $("#Status").slideDown();
                      }
                      $("#close").click( function () {
                          s.close(1000, "Try to Close");
                      });
              });
  
          &lt;/script&gt;
          &lt;style&gt;
              .hightlight{
                  font-size: 2em;
                  font-weight: bold;
                  color: rgb(138, 109, 59);
                  background-color: rgb(252, 248, 227);
                  border-color: rgb(250, 235, 204); 
              }
          &lt;/style&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div class="container"&gt;
              &lt;div class="row" id="Status"&gt;
                  &lt;div class="alert alert-warning"&gt;
                      &lt;strong&gt;Warning&lt;/strong&gt;&lt;p&gt;&lt;/p&gt;
                      &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="row"&gt;
                  &lt;div class="panel panel-primary"&gt;
                      &lt;div class="panel-heading" &gt;
                          &lt;h2 class="panel-title" style="display:inline;font-size:160%;" &gt;Temperature Log&lt;/h2&gt;
                          &lt;button class="btn btn-warning" type="button" id="close" style="display:inline;float:right;"&gt;Close&lt;/button&gt;
                      &lt;/div&gt;
                      &lt;div class="panel-body"&gt;
                          &lt;ul id="templog" class="list-group"&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>