Django Channels connection with Web socket

Question

I have implemented the Django Channels as given in the tutorial . The chat works fine and i am able to send and receive messages in a group.

But when i try to send a message from a web socket to channels chat it does not display the message. Instead an error is populated. However, i am able to recieve messages from Channels chat to my web socket html page.

websocket.html

<!DOCTYPE html>
  <meta charset="utf-8" />
  <title>WebSocket Test</title>
  <script language="javascript" type="text/javascript">

  var wsUri = "ws://localhost:8000/ws/power/room/";
  var output;

  function init()
  {
    output = document.getElementById("output");
    testWebSocket();
    testWebSocket();
  }

  function testWebSocket()
  {
    websocket = new WebSocket(wsUri);
    websocket.onopen = function(evt) { onOpen(evt) };
    websocket.onclose = function(evt) { onClose(evt) };
    websocket.onmessage = function(evt) { onMessage(evt) };
    websocket.onerror = function(evt) { onError(evt) };
  }

  function onOpen(evt)
  {
    writeToScreen("CONNECTED");
    doSend("WebSocket rocks");
  }

  function onClose(evt)
  {
    writeToScreen("DISCONNECTED");
  }

  function onMessage(evt)
  {
    writeToScreen('<span style="color: blue;">RESPONSE: ' + evt.data+'</span>');
    websocket.close();
  }

  function onError(evt)
  {
    writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
  }

  function doSend(message)
  {
    writeToScreen("SENT: " + message);
    websocket.send(message);
  }

  function writeToScreen(message)
  {
    var pre = document.createElement("p");
    pre.style.wordWrap = "break-word";
    pre.innerHTML = message;
    output.appendChild(pre);
  }

  window.addEventListener("load", init, false);

  </script>

  <h2>WebSocket Test</h2>

  <div id="output"></div>

consumers.py

class EchoConsumer(AsyncWebsocketConsumer):
    async def connect(self):
        self.room_name = self.scope['url_route']['kwargs']['room_name']
        self.room_group_name = 'chat_%s' % self.room_name

        # Join room group
        await self.channel_layer.group_add(
            self.room_group_name,
            self.channel_name
        )

        await self.accept()

    async def disconnect(self, close_code):
        # Leave room group
        await self.channel_layer.group_discard(
            self.room_group_name,
            self.channel_name
        )

    # Receive message from WebSocket
    async def receive(self, text_data):
        text_data_json = json.loads(text_data)
        message = text_data_json['message']

        # Send message to room group
        await self.channel_layer.group_send(
            self.room_group_name,
            {
                'type': 'chat_message',
                'message': message
            }
        )

    # Receive message from room group
    async def chat_message(self, event):
        message = event['message']

        # Send message to WebSocket
        await self.send(text_data=json.dumps({
            'message': message
        }))

The error which i am receiving at channels server is

WebSocket HANDSHAKING /ws/power/room/ [127.0.0.1:56879]
WebSocket CONNECT /ws/power/room/ [127.0.0.1:56879]
Exception inside application: Expecting value: line 1 column 1 (char 0)
  File "C:\Program Files\Python37\lib\site-packages\channels\sessions.py", line 179, in __call__
    return await self.inner(receive, self.send)
  File "C:\Program Files\Python37\lib\site-packages\channels\middleware.py", line 41, in coroutine_call
    await inner_instance(receive, send)
  File "C:\Program Files\Python37\lib\site-packages\channels\consumer.py", line 59, in __call__
    [receive, self.channel_receive], self.dispatch
  File "C:\Program Files\Python37\lib\site-packages\channels\utils.py", line 52, in await_many_dispatch
    await dispatch(result)
  File "C:\Program Files\Python37\lib\site-packages\channels\consumer.py", line 73, in dispatch
    await handler(message)
  File "C:\Program Files\Python37\lib\site-packages\channels\generic\websocket.py", line 196, in websocket_receive
    await self.receive(text_data=message["text"])
  File "C:\Users\Suleman\PycharmProjects\power\myChannels\consumers.py", line 39, in receive
    text_data_json = json.loads(text_data)
  File "C:\Program Files\Python37\lib\json\__init__.py", line 348, in loads
    return _default_decoder.decode(s)
  File "C:\Program Files\Python37\lib\json\decoder.py", line 337, in decode
    obj, end = self.raw_decode(s, idx=_w(s, 0).end())
  File "C:\Program Files\Python37\lib\json\decoder.py", line 355, in raw_decode
    raise JSONDecodeError("Expecting value", s, err.value) from None
  Expecting value: line 1 column 1 (char 0)
WebSocket DISCONNECT /ws/power/room/ [127.0.0.1:56879]

Answer 1

The payload needs to be a valid JSON object, you are only sending a string. Try changing your function:

function doSend(message) {
    writeToScreen("SENT: " + message);
    websocket.send(JSON.stringify({message: message}();
}

Answer 2

You need to JSON stringify the message in your doSend function:

websocket.send(JSON.stringify({
  'message': message
}));

Django Channels connection with Web socket

Question

2 answers

solution1
2 2019-01-29 14:48:48

solution2
0 2019-01-29 17:10:23

Django Channels connection with Web socket

Question

2 answers

solution1 2 2019-01-29 14:48:48

solution2 0 2019-01-29 17:10:23

solution1
2 2019-01-29 14:48:48

solution2
0 2019-01-29 17:10:23