VueJS + Django Channels

Question

Tôi vừa đọc xong phần giới thiệu cho VueJS và Django Channels và muốn sử dụng chúng cùng nhau để cung cấp cập nhật theo thời gian thực cho một số thành phần trên trang web. Điều này minh họa ý tưởng cơ bản:

Là mới đến VueJS, có vẻ như sơ đồ ở trên đòi hỏi phải có một số loại "người đàn ông trung", giữa các thành phần VueJS và WebSocket, mà làm cho chắc chắn rằng mỗi thành phần được chính xác dữ liệu.

Vì vậy, câu hỏi của tôi là:

1. Về mặt kiến ​​trúc, đây là một thiết kế tốt?
2. Nếu có, VueJS có thể hoạt động như "người trung gian" đó để quản lý thành phần nào kết nối với kênh nào không?

Nhờ sự giúp đỡ của bạn :)

Answer 1

Không, bạn không cần một người đàn ông trung. Nhưng bạn có thể (nếu có nhiều cập nhật thông qua kênh) tốt hơn với việc sử dụng Vuex và nạp dữ liệu đó vào ổ cắm. Sau đó, nếu tất cả mọi thứ có dây chính xác ứng dụng Vue của bạn sẽ chỉ là lớp xem phản ứng (không có ý định chơi chữ) để thay đổi.

Kênh Django chỉ là hàng đợi (đầu tiên ra trước). Bạn chuyển bất kỳ dữ liệu nào bạn cần để gửi đến giao diện người dùng cho kênh. Tất cả các dữ liệu được serialized và chuyển đến hàng đợi. Kênh ở chế độ công nhân và ngay sau khi nhận được một tin nhắn (có dữ liệu), nó cố gắng phát ra nó trên chính kênh đó.

Làm thế nào để thu thập dữ liệu này trong Vue?

Điều tôi đã làm là thiết lập Vuex. Sau đó tôi đã tạo một plugin Vuex có tên là createWebSockets.js. Khi bạn đi qua các tài liệu của plugin Vuex và Vuex, bạn sẽ thấy plugin có quyền truy cập vào phương thức Vuex commit. Trong plugin cho biết tôi đã mở ổ cắm cho các kênh tôi đã chạy trên máy chủ và bất cứ khi nào thông điệp mới đến thông qua tôi chỉ đẩy dữ liệu trong Vuex và ứng dụng Vue của tôi chỉ phản ứng với những thay đổi này.

Tôi có thể tìm thấy ở đâu đó nếu bạn cần thêm trợ giúp.

nhất

Sửa

Vì vậy, sau khi bạn có được cho mình quen thuộc với Vuex và thêm nó vào ứng dụng của bạn, bạn có thể làm một cái gì đó như thế này:

// đang cắm

// importing from node_modules -> you have to install it 
// through npm or yarn 
import io from 'socket.io-client' 

// opening a socket to an IP. Mind that I've put an 
// example IP here yours will be an IP belonging to the 
// server or 127.0.0.1 if you're working locally 
const socket = io('127.0.0.1:4000') 

// this is a vuex plugin that takes the store (vuex store) 
// object as its parametar 
export default function createWebSockets(socket) { 

    // it returns a function to which we passed store object 
    return (store) => { 

     // this is your channel name on which you want to 
     // listen to emits from back-end 
     const channel_name = 'whatever-you-called-it' 

     // this opens a listener to channel you named on line above 
     socket.on('channel_name', (data) => { // 

      // and this is the store part where you 
      // just update your data with data received from socket 
      store.commit('YOUR_VUEX_MUTATION', data) 

     }) 

     // you can add multiple socket.on statements if you have more than one channel 
    } 
} 

Đây là cách bạn cập nhật Vuex thông qua ổ cắm.

Hy vọng điều đó sẽ hữu ích.