Chatbot在Angular 4和Django中使用websockets

问题描述：

我想创建使用PostgreSQL数据库的Django后端和Angular 4前端之间的实时聊天。假设我想创建chatbot，例如A.L.I.C.E。我不确定，但在我看来，最优化的解决方案是使用websockets？我试图从前端获取数据，将其添加到PostgreSQL数据库，然后返回响应。目前内容并不重要，我只想关注连接。我正在尝试按照下面所示的方式执行此操作，但没有获得正面结果。有什么建议么？在在Safari控制台，我得到：Chatbot在Angular 4和Django中使用websockets

Django的：

settings.py：

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

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：

# 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：

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：

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 
       } 
      }); 
    } 
}

请提高你的问题，明确说明你有什么问题。 >没有正面结果太宽 –

@JahongirRahmonov我已更新我的问题。现在好吗？ – wahtdbogh

答

我的解决办法是改变const CHAT_URL = 'http://0.0.0.0:8000/';到const CHAT_URL = 'ws://localhost:8000/';

Chatbot在Angular 4和Django中使用websockets

相关推荐