2013-04-07 33 views
16

Tôi rất mới đối với node.js, nhưng thực tế chỉ có một điều đơn giản mà tôi đang cố gắng đạt được bằng cách học ngôn ngữ.node.js - làm cách nào để thực hiện cập nhật trang trực tiếp đơn giản?

Tôi muốn tạo trang web, trong đó bằng mã trong "div" cụ thể có thể được cập nhật nhanh khi người dùng hiện đang xem trang đó. (ví dụ: div chứa một số văn bản, nhưng sau đó một hình ảnh sẽ thay thế nó.) Lý tưởng nhất, việc hoán đổi sẽ được thực thi một cách thủ công bởi quản trị viên của trang web thông qua một nút hoặc một số mã được kích hoạt trên máy chủ hoặc một cái gì đó. Người xem thường xuyên vào trang web sẽ không thể thực hiện việc này - họ chỉ thấy các thay đổi trực tiếp trên trang.

ví dụ thực tế:

phát sóng internet trực tiếp là không trực tuyến, do đó "div" chứa văn bản "ngoài không khí". hotswap trực tiếp của mã xảy ra khi chương trình phát sóng phát trực tuyến và người xem trang web hiện xem trình phát quảng cáo html5 trong "div" thay thế.

Cách đơn giản nhất để thực hiện việc này cho một newbie node.js là gì?

Rất cám ơn :)

Trả lời

15

Hãy xem Socket.IO http://socket.io/#how-to-use

khi máy chủ quyết định phát sóng một thay đổi sử dụng:

io.sockets.emit('update-msg', { data: 'this is the data'});

trên máy khách đầu tiên kết nối socket. io và sau đó đợi sự kiện "cập nhật-msg" và cập nhật số điện thoại của bạn:

var socket = io.connect('http://localhost'); 
socket.on('update-msg', function (msg) { 
    console.log(msg); 
    $('#mydiv').html(msg.data) 
}); 
+1

đây là cách cơ bản để làm điều đó, nhưng câu trả lời của tôi hướng dẫn bạn qua tất cả các bước để có cách tiếp cận tinh vi hơn –

4

Tôi đã tạo một hệ thống/phương pháp luận để cập nhật trực tiếp (tải lại nóng) mã front-end bằng cách sử dụng RequireJS và Node.js. Tôi chắc chắn rằng nó đã làm việc với cả React và Backbone. Bạn có thể đọc về nó ở đây:

https://medium.com/@the1mills/hot-reloading-with-react-requirejs-7b2aa6cb06e1

các bước cơ bản trong việc này bản thân:

  1. gulp.js sát lắng nghe cho hệ thống tập tin thay đổi
  2. máy chủ socket.io trong gulpfile gửi tin nhắn cho tất cả khách hàng trình duyệt với đường dẫn của tệp đã thay đổi
  3. khách hàng xóa bộ nhớ cache đại diện cho tệp/mô-đun đó và yêu cầu lại nó (sử dụng AJAX để kéo nó từ hệ thống tập tin của máy chủ)
  4. ứng dụng front-end được cấu hình/được thiết kế để đánh giá lại tất cả các tham chiếu đến các mô-đun mà nó muốn tải lại nóng, trong trường hợp này, chỉ JS lượt xem, mẫu và CSS có sẵn để tải lại nóng - bộ định tuyến, bộ điều khiển, kho dữ liệu (Bộ sưu tập và Mô hình đường trục) chưa được cấu hình . Tôi nghi ngờ rằng tất cả các tệp có thể được tải lại nóng với ngoại lệ duy nhất là các cửa hàng dữ liệu.
Các vấn đề liên quan