How to set up django channels?

Question

I have a problem with WebSocket. I create an object in the admin panel, and the frontend calls for getting the JSON object to the server. I need to eventually get a real-time update on the front after creating the object.

consumers.py

@receiver(post_save, sender=Factory)
def send_update(sender, instance, **kwargs):
    Group("liveblog").send({
        "text": json.dumps({
            "id": instance.id,
            "titile": instance.title,
            "choice": instance.choice,
            "address": instance.address
        })
    })

 class MyConsumer(JsonWebsocketConsumer):

    strict_ordering = False

    def connection_groups(self, **kwargs):
        return ["liveblog"]

    def ws_connect(self, message):
        Group("liveblog").add(message.reply_channel)
        message.reply_channel.send({"accept": True})


    def receive(self, content, **kwargs):
        multiplexer = kwargs['multiplexer']
        response = {
            "id": self.id,
            "title": self.title,
            "choice":self.choice,
            "address":self.address
        }
        multiplexer.send({"response":"OK"}) 
        multiplexer.group_send("liveblog", response)  

    def ws_disconnect(self, message):
        Group("liveblog").discard(message.reply_channel)

routing.py

channel_routing = [
    route_class(MyConsumer)
]

.js

var ws_scheme = window.location.protocol == "https:" ? "wss" : "ws";
var ws_path = ws_scheme + '://' + window.location.host;

var socket = new WebSocket("ws://localhost:8000");

socket.onopen = function () {
    console.log("Connected to socket");
  };
socket.onclose = function () {
    console.log("Disconnected from socket");
  }

What am I doing wrong?

console in browser

Connected to socket
28[Violation] Added non-passive event listener to a scroll-blocking 
<some> event. Consider marking event handler as 'passive' to make the 
page more responsive. See <URL>
main.js:112 storage
main.js:113 []
main.js:88 sump
main.js:89 []
main.js:65 factorys
main.js:66 (6) [{…}, {…}, {…}, {…}, {…}, {…}]
main.js:135 petrol
main.js:136 []
main.js:155 line
main.js:156 []
inception.js:1 [Violation] 'message' handler took 349ms
[Violation] Forced reflow while executing JavaScript took 337ms

console in terminal

[2018/09/10 13:06:00] HTTP GET /l/ 200 [0.05, 127.0.0.1:63006]
[2018/09/10 13:06:00] HTTP GET /robots.txt 404 [0.05, 127.0.0.1:63007]
[2018/09/10 13:06:00] WebSocket DISCONNECT / [127.0.0.1:63658]
[2018/09/10 13:06:01] HTTP GET /static/js/main.js 304 [0.05, 127.0.0.1:63006]
[2018/09/10 13:06:02] WebSocket HANDSHAKING / [127.0.0.1:63014]
[2018/09/10 13:06:02] WebSocket CONNECT / [127.0.0.1:63014]
[2018/09/10 13:06:03] HTTP GET /getStorage/ 200 [0.08, 127.0.0.1:63023]
[2018/09/10 13:06:03] HTTP GET /getPetrol/ 200 [0.08, 127.0.0.1:63024]
[2018/09/10 13:06:03] HTTP GET /getSump/ 200 [0.14, 127.0.0.1:63007]
[2018/09/10 13:06:03] HTTP GET /getLine/ 200 [0.11, 127.0.0.1:63025]
[2018/09/10 13:06:03] HTTP GET /getFactory/ 200 [0.16, 127.0.0.1:63006]

Answer 1

I think your socket didn't get the message. Add the following listener to your js file.

socket.onmessage = function(event) {
  alert(event.data);
};