Как связать js и django channels?

Question

[Dini4ka]

Всем привет ! Есть у меня .js который на данный момент отравляет AJAX запрос по API, получает JSON фаил, парсит последний и рисует соответствующие элементы на страничке. Хотел сделать так, чтобы скрипт получал JSON фаил не через API, а напрямую из БД. Для этого прописал websocket в соответствующем приложении, в consumers.pyпрописал соответствующую функцию :

# Analogue of the API or the rental search command
class DataConsumer(WebsocketConsumer):
 def wb_rental_search(self, data):
        city = data['city']
        end_date = data['end']
        start_date = data['start']
        
        with connection.cursor() as cursor:
                selector = f"select * from rentals_available_bot('russia', '{city}', '{start_date}', '{end_date}', {num_of['adult']}, {num_of['kid']}, 'ru');"
                cursor.execute(selector)
                row = cursor.fetchall() 
        
        res_rentals = []
        for item in row:
            row_rentals.append(item)

        content = {
            "command": "getBookingSources",
            "data": res_rentals,
            "actionTag": wb_rental_search
        }

        # DEBUG_LOG
        debug_log(f"FUN(get_sources): sources={sources}", "consumers_debug2.txt")

        self.send_new_data(content)

И также прописал routing.py :

from django.conf.urls import url
from . import consumers

websocket_urlpatterns = [
url(r'ws/data', consumers.DataConsumer),]

Дальше не понимаю как переписать этот .js скрипт на обращение к сокету, вместо старого обращению к API. Вот кусок .js скрипт, где он формирует ссылку для API :

getRentals(){
        const {t} = this.props;

        const arrival = this.state.arrival;
        const departure = this.state.departure;
        const sleeps = this.state.sleeps;
        const city = this.state.city;

        let url = "";
        if (arrival === null && departure === null && sleeps === null){
            url = this.apiUrl + "api/rentals/search/?pretty=true&city=" + city;
	} else if (arrival && departure && sleeps) {
            url = this.apiUrl + "api/rentals/search/?city=" + city
            + "&start=" + arrival
            + "&end=" + departure
            + "&sleeps=" + sleeps;
        } else {
            this.setState({
                showError: true,
                rentalsSet: true,
                placeholder: t("You need to specify all the parameters to conduct the search - {{params}}.", {params: "city, arrival, departure, guests"})
            })
        }
        if (url != ""){
            let fetchError = false;

            const successCallback = function onSuccess(json){
                let photos = {};

                for (let rental of json){
                    let rentalPhotos = rental.photos;
                    for (let i=0; i<rentalPhotos.length; i++){
                        let photo = rentalPhotos[i];

                        photo.index = i + 1;

                        if (i == 0){
                            photo["show"] = true;
} else {
                            photo["show"] = false;
                        }
                    }
                    photos[rental.id] = rental.photos;
                }

                this.setState({
                    rentals: json,
                    photos: photos,
                    rentalsSet: true
                })

                if (json.length === 0){
                    this.setState({
                        pricesSet: true
                    })
                } else {
                    this.rentalIds = []
                    for (let rental of json){
                        this.rentalIds.push(rental.id);
                    }

                    let rentalPrices = this.state.rentalPrices;
                    for (let rental of json){
                        let price = {
                            price: rental.absolute_min_price,
                            cleaning_fee: rental.cleaning_fee,
                            currency: rental.currency,
                            rental: rental.id
                        }
                        rentalPrices[rental.id] = price;
                    }

                    this.setState({
                        rentalPrices: rentalPrices,
                    })
                    // this.getRentalPrice(this.rentalIds.shift());
                }
            }

            const failureCallback = function onFailure(errorText){
                this.setState({
                    showError: true,
                    rentalsSet: true,
                    placeholder: errorText
                })
            }

            fiFetch(url, "GET", null, successCallback.bind(this), failureCallback.bind(this), t);
        }
    }

Comments

[Dini4ka]

GNUBack, Так я более менее разобрался, как у меня все работает. Вебсокет уже есть в приложении, я туда просто свою функцию приписал и все. Просто не очень понимаю как теперь .js скрипт с ним связать. Или нужно вообще новый писать или старый переделывать