在Angular 4和Django中使用websockets的Chatbot [英] Chatbot using websockets in Angular 4 and Django

问题描述

我正在尝试使用PostgreSQL数据库在Django后端和Angular 4前端之间创建实时聊天.假设我想创建一个聊天机器人，例如 ALICE .我不确定，但是在我看来，最佳的解决方案是使用websockets?我试图从前端获取数据，将其添加到PostgreSQL数据库，然后返回响应.此刻的内容并不重要，我只想关注连接.我正在尝试以下面显示的方式执行此操作，但没有取得积极的结果.有什么建议?在Safari的控制台中，我得到:

I am trying to create real-time chat between Django backend and Angular 4 frontend using PostgreSQL database. Let's assume that I would like to create chatbot for instance like A.L.I.C.E. I am not sure but it seems to me that the most optimal solution would be to use websockets? I am trying to get data from frontend, add it to the PostgreSQL database and then return a response. Content at this moment is not important, I would like to focus only on connection. I am trying to do this in the way shown below without positive results. Any suggestions? In console in Safari I get:

Django:

settings.py:

settings.py:

CHANNEL_LAYERS = {
    "default": {
        "BACKEND": "asgiref.inmemory.ChannelLayer",
        "ROUTING": "backend.routing.channel_routing",
    },
}

routing.py:

routing.py:

from channels.routing import route
from backend.consumers import ws_add, ws_message, ws_disconnect

channel_routing = [
    route("websocket.connect", ws_add),
    route("websocket.receive", ws_message),
    route("websocket.disconnect", ws_disconnect),
]

consumers.py:

consumers.py:

# In consumers.py
from channels import Group

# Connected to websocket.connect
def ws_add(message):
    # Accept the connection
    message.reply_channel.send({"accept": True})
    # Add to the chat group
    Group("chat").add(message.reply_channel)

# Connected to websocket.receive
def ws_message(message):
    Group("chat").send({
        "text": "[user] %s" % message.content['text'],
    })

# Connected to websocket.disconnect
def ws_disconnect(message):
    Group("chat").discard(message.reply_channel)

角度4:

websocket.service.ts:

websocket.service.ts:

import { Injectable } from '@angular/core';
import * as Rx from 'rxjs/Rx';

@Injectable()
export class WebsocketService {
  constructor() { }

  private subject: Rx.Subject<MessageEvent>;

  public connect(url): Rx.Subject<MessageEvent> {
    if (!this.subject) {
      this.subject = this.create(url);
      console.log("Successfully connected: " + url);
    }
    return this.subject;
  }

  private create(url): Rx.Subject<MessageEvent> {
    let ws = new WebSocket(url);

    let observable = Rx.Observable.create(
    (obs: Rx.Observer<MessageEvent>) => {
        ws.onmessage = obs.next.bind(obs);
        ws.onerror = obs.error.bind(obs);
        ws.onclose = obs.complete.bind(obs);
        return ws.close.bind(ws);
    })
let observer = {
        next: (data: Object) => {
            if (ws.readyState === WebSocket.OPEN) {
                ws.send(JSON.stringify(data));
            }
        }
    }
    return Rx.Subject.create(observer, observable);
  }

}

chat.service.ts:

chat.service.ts:

import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs/Rx';
import { WebsocketService } from './websocket.service';

const CHAT_URL = 'http://0.0.0.0:8000/';

export interface Message {
    author: string,
    message: string
}

@Injectable()
export class ChatService {
    public messages: Subject<Message>;

    constructor(wsService: WebsocketService) {
        this.messages = <Subject<Message>>wsService
            .connect(CHAT_URL)
            .map((response: MessageEvent): Message => {
                let data = JSON.parse(response.data);
                return {
                    author: data.author,
                    message: data.message
                }
            });
    }
}

推荐答案

我的解决方案是将const CHAT_URL = 'http://0.0.0.0:8000/';更改为const CHAT_URL = 'ws://localhost:8000/';

My solution was to change const CHAT_URL = 'http://0.0.0.0:8000/'; toconst CHAT_URL = 'ws://localhost:8000/';

这篇关于在Angular 4和Django中使用websockets的Chatbot的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！