{"id":1234,"date":"2021-02-08T20:49:54","date_gmt":"2021-02-08T17:49:54","guid":{"rendered":"https:\/\/www.etemkeskin.com\/?p=1234"},"modified":"2021-02-08T20:50:16","modified_gmt":"2021-02-08T17:50:16","slug":"real-time-application-development-using-websocket-in-django","status":"publish","type":"post","link":"https:\/\/www.etemkeskin.com\/index.php\/2021\/02\/08\/real-time-application-development-using-websocket-in-django\/","title":{"rendered":"Real-Time Application Development Using Websocket in Django"},"content":{"rendered":"\n

WebSocket<\/strong> is a computer communication protocol that provides a full duplex communication channel over a single TCP connection. All internet browsers have supported Websockets since 2011.<\/p>\n\n\n\n

Application development with Websocket is a popular topic. However, when developing a web application, it must be decided whether it is necessary to develop with websocket. <\/p>\n\n\n\n

Which Web Applications can be Developed using Websocket <\/h4>\n\n\n\n
  1. Chat Apps<\/li>
  2. Real-time push nitifications<\/li>
  3. Real-time graph<\/li>
  4. Real-time applications (GPS tracking, reading instant data from sensors and taking action) by connecting with IOT devices (such as rasberrypie …)<\/li>
  5. Chat bots<\/li><\/ol>\n\n\n\n

    Django channels:<\/strong> It is a package that provides long-running connections for Django projects such as WebSockets, MQTT, chatbots, amateur radio and more … . It adds extra features to asynchronous views that come with Django.<\/p>\n\n\n\n

    Objectives<\/h4>\n\n\n\n

    In this post<\/p>\n\n\n\n

    1. Providing Web sockets support to Django project using Django channels<\/li>
    2. Creating a publisher in Jupyter notebook and sending data to Django application with websockets.<\/li>
    3. By making a websocket connection in Frontend, we will update the data instantly.<\/li><\/ol>\n\n\n\n

      Libraries Needed<\/strong><\/p>\n\n\n\n

      For our real-time application, we need to install the following libraries on our computer.<\/p>\n\n\n\n

      pip install Django<\/code>\npip install -U channels<\/code>\npip install websocket-client<\/code>\n\nsettings.py<\/strong><\/pre>\n\n\n\n
      We need to define channels below INSTALLED_APPS in our settings.py file as follows. In our project, we started the application called liveapp<\/strong>.<\/p>\n\n\n\n
      INSTALLED_APPS = [\n    'channels', # for async app  it must be top place\n  \n  \t'liveapp'<\/pre><\/div>\n\n\n\n
      Since our application will work asynchronously, we need to define it as follows. In learndj<\/strong> project, we created a file named routing.py<\/strong> where we will define urls<\/strong>.<\/p>\n\n\n\n
      WSGI_APPLICATION = 'learndj.wsgi.application'\nASGI_APPLICATION = 'learndj.routing.application'<\/pre><\/div>\n\n\n\n
      If we are going to use CHANNEL_LAYERS<\/strong> that came with Django, we add the following codes. If Redis will be used in real time application, you can use the commented part in the following codes.<\/p>\n\n\n\n
      CHANNEL_LAYERS = {\n    "default": {\n        "BACKEND": "channels.layers.InMemoryChannelLayer"\n    },\n}\n\n# CHANNEL_LAYERS = {\n#     "default": {\n#         "BACKEND": "channels_redis.core.RedisChannelLayer",\n#         "CONFIG": {\n#             "hosts": [("localhost", 6379)],\n#         },\n#     },\n# }<\/pre><\/div>\n\n\n\n
      The file structure of our learndj<\/strong> project is as follows.<\/p>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      routing.py<\/strong><\/p>\n\n\n\n
      After creating the routing.py file, we will use the following codes. When defining the websocket url<\/strong>, we add ws\/<\/strong> prefix to separate it from other urls. 
      Consumer class that will run when a request is made to the websocket url is the DashConsumer<\/strong> class in the consumer.py<\/strong> file we created.<\/p>\n\n\n\n
      from channels.routing import ProtocolTypeRouter, URLRouter\nfrom channels.auth import AuthMiddlewareStack\nfrom django.urls import path\nfrom liveapp import consumer\n\nwebsocket_urlPattern = [\n    #In routing.py, "as_asgi()" is required for versions over python 3.6.\n    path('ws\/pollData', consumer.DashConsumer.as_asgi()), # add ws for prefix.\n]\n\napplication = ProtocolTypeRouter({\n    'websocket':AuthMiddlewareStack(URLRouter(websocket_urlPattern ))\n})<\/pre><\/div>\n\n\n\n
      consumer.py<\/strong><\/p>\n\n\n\n
      Consumers are the equivalent of view functions in Django. We created our file named consumer.py<\/strong> in liveapp<\/strong> application.<\/p>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      We have defined consumer functions that will work with the code block below. A user connecting to the websocket url of our application will be added to the dashboard<\/strong> group.<\/p>\n\n\n\n
      from channels.generic.websocket import AsyncJsonWebsocketConsumer\nimport json\n\nclass DashConsumer(AsyncJsonWebsocketConsumer):\n    print('==================')\n    async def connect(self):\n        self.groupname='dashboard'\n        await self.channel_layer.group_add(\n            self.groupname,\n            self.channel_name,\n        )\n        await self.accept()\n\n    async def disconnect(self,close_code):\n        await self.channel_layer.group_discard(\n            self.groupname,\n            self.channel_name\n        )   \n\n    async def receive(self, text_data):\n        datapoint = json.loads(text_data)\n        val =datapoint['value']\n\n        await self.channel_layer.group_send(\n            self.groupname,\n            {\n                'type':'deprocessing', #function name to run\n                'value':val #value to send function\n            }\n        )\n        print ('>>>>',text_data)\n\n    async def deprocessing(self,event):\n        valOther=event['value']\n        valOther = f'IP VALUE: {valOther}'\n        await self.send(text_data=json.dumps({'value2':valOther}))# send for frontend<\/pre><\/div>\n\n\n\n
      The python script that will connect to our application and send data in json format is as follows. Data generated instantly in Jupyter notebook will be rendered in template.<\/p>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      When we run Jupyter notebook, we print the incoming data in the receive function in consumer.py. We can see the printed json data in the command line where we run django as in the picture below.<\/p>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      We create a template named live_app.html<\/strong> and add the following code block inside.<\/p>\n\n\n\n
      <h2>Live APP<\/h2>\n<h3 id='poll_data'>Data<\/h3>\n<script>\n  \tconst myDiv = document.getElementById('poll_data')\n    \n    let socket = new WebSocket('ws:\/\/localhost:8000\/ws\/pollData');\n    socket.onopen = function(e){\n        alert('connection established');\n    }\n\n    socket.onmessage = function(e){\n        console.log(e.data);\n        result = JSON.parse(e.data);\n      \tmyDiv.textContent = result.value2;\n    }\n\n    socket.onclose = function(e){\n        alert('connection closed');\n    }\n<\/script><\/pre><\/div>\n\n\n\n
      When we define any url<\/strong> and view<\/strong> that will render this template, we can see that the data is updated instantly as in the picture below.<\/p>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      Good Luck …<\/p>\n","protected":false},"excerpt":{"rendered":"
      WebSocket is a computer communication protocol that provides a full duplex communication channel over a single TCP connection. All internet browsers have supported Websockets since 2011. Application development with Websocket is a popular topic. However, when developing a web application, it must be decided whether it is necessary to develop with websocket. Which Web Applications […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[30,4],"tags":[],"yoast_head":"\nReal-Time Application Development Using Websocket in Django - blog website<\/title>\n<meta name=\"description\" content=\"WebSocket is a computer communication protocol that provides a full duplex communication channel over a single TCP connection. All internet browsers have supported Websockets since 2011. Application development with Websocket is a popular topic. However, when developing a web application, it must be decided whether it is necessary to develop with websocket.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.etemkeskin.com\/index.php\/2021\/02\/08\/real-time-application-development-using-websocket-in-django\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Real-Time Application Development Using Websocket in Django - blog website\" \/>\n<meta property=\"og:description\" content=\"WebSocket is a computer communication protocol that provides a full duplex communication channel over a single TCP connection. All internet browsers have supported Websockets since 2011. Application development with Websocket is a popular topic. However, when developing a web application, it must be decided whether it is necessary to develop with websocket.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.etemkeskin.com\/index.php\/2021\/02\/08\/real-time-application-development-using-websocket-in-django\/\" \/>\n<meta property=\"og:site_name\" content=\"blog website\" \/>\n<meta property=\"article:published_time\" content=\"2021-02-08T17:49:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-02-08T17:50:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.etemkeskin.com\/wp-content\/uploads\/2021\/02\/image-5.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.etemkeskin.com\/#website\",\"url\":\"https:\/\/www.etemkeskin.com\/\",\"name\":\"blog website\",\"description\":\"Etem KESK\\u0130N\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.etemkeskin.com\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"tr\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/2021\/02\/08\/real-time-application-development-using-websocket-in-django\/#primaryimage\",\"inLanguage\":\"tr\",\"url\":\"https:\/\/www.etemkeskin.com\/wp-content\/uploads\/2021\/02\/image-5.png\",\"contentUrl\":\"https:\/\/www.etemkeskin.com\/wp-content\/uploads\/2021\/02\/image-5.png\",\"width\":157,\"height\":218},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/2021\/02\/08\/real-time-application-development-using-websocket-in-django\/#webpage\",\"url\":\"https:\/\/www.etemkeskin.com\/index.php\/2021\/02\/08\/real-time-application-development-using-websocket-in-django\/\",\"name\":\"Real-Time Application Development Using Websocket in Django - blog website\",\"isPartOf\":{\"@id\":\"https:\/\/www.etemkeskin.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/2021\/02\/08\/real-time-application-development-using-websocket-in-django\/#primaryimage\"},\"datePublished\":\"2021-02-08T17:49:54+00:00\",\"dateModified\":\"2021-02-08T17:50:16+00:00\",\"author\":{\"@id\":\"https:\/\/www.etemkeskin.com\/#\/schema\/person\/dcbc30282861ce578b96a79ce8789629\"},\"description\":\"WebSocket is a computer communication protocol that provides a full duplex communication channel over a single TCP connection. All internet browsers have supported Websockets since 2011. Application development with Websocket is a popular topic. However, when developing a web application, it must be decided whether it is necessary to develop with websocket.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/2021\/02\/08\/real-time-application-development-using-websocket-in-django\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.etemkeskin.com\/index.php\/2021\/02\/08\/real-time-application-development-using-websocket-in-django\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/2021\/02\/08\/real-time-application-development-using-websocket-in-django\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Ana sayfa\",\"item\":\"https:\/\/www.etemkeskin.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Real-Time Application Development Using Websocket in Django\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.etemkeskin.com\/#\/schema\/person\/dcbc30282861ce578b96a79ce8789629\",\"name\":\"etemkeskin\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.etemkeskin.com\/#personlogo\",\"inLanguage\":\"tr\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6af0148b790691ed24ae245fb3dc773b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6af0148b790691ed24ae245fb3dc773b?s=96&d=mm&r=g\",\"caption\":\"etemkeskin\"},\"url\":\"https:\/\/www.etemkeskin.com\/index.php\/author\/etemkeskinyahoo-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/1234"}],"collection":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/comments?post=1234"}],"version-history":[{"count":27,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/1234\/revisions"}],"predecessor-version":[{"id":1263,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/1234\/revisions\/1263"}],"wp:attachment":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/media?parent=1234"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/categories?post=1234"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/tags?post=1234"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}