Ví dụ về trò chuyện socket.io - sails.js

Question

Vì vậy, tôi đã cố gắng tích hợp socket.io vào dự án cánh buồm của mình. Tuy nhiên tôi tìm thấy rất ít tài liệu trên trang web sails.js. Tôi đang cố gắng xây dựng một cuộc trò chuyện giữa hai trình duyệt của máy chủ của tôi.

trong các khách hàng tôi có:

io.socket.get('/posts/testStream', function serverResponded (body, JWR) { 

    // JWR ==> "JSON WebSocket Response" 
    console.log('Sails responded with: ', body); 
    console.log('with headers: ', JWR.headers); 
    console.log('and with status code: ', JWR.statusCode); 

    io.socket.on('messege', function onServerSentEvent (msg) { 
     console.log(msg); 
    }); 

    // first argument `body` === `JWR.body` 
    // (just for convenience, and to maintain familiar usage, a la `JQuery.get()`) 
}); 

và đây là:/posts/testStream:

testStream: function(req,res){ 

    res.view(); 
}, 

Làm thế nào tôi có thể truyền dữ liệu cho khách hàng và làm thế nào tôi có thể gửi tin thông báo trở lại máy chủ? nếu bạn có thể chỉ cho tôi một ví dụ tuyệt vời.

Answer 1

Không biết, nếu bạn stil cần nó. Chỉ trong trường hợp và thực hành của riêng tôi ở đây là ví dụ làm việc.

Tôi đã sử dụng CSS framework Semantic-UI cho kiểu và Knockout.js để kết xuất trò chuyện. Ngoài ra tất cả các truy vấn được thực hiện bởi sails.io.js. Đặt chúng vào nội dung thư mục trước khi thử nghiệm.

Mẫu api/mô hình/Chat.js:

module.exports = { 

    attributes: { 
     id: { 
       type: 'integer', 
       primaryKey: true, 
       autoIncrement: true, 
       unique: true 
      }, 
     text: 'string' 
    } 
}; 

khiển api/controllers/ChatController.js:

module.exports = { 
    do: function(req, res){ 
     return res.view(); 
    } 
}; 

Xem views/chat/do.ejs:

<div class="ui very padded basic segment"> 
    <div class="ui feed" data-bind="foreach: { data: messages, as: 'message' }"> 
     <div class="event"> 
      <div class="content"> 
       <div class="summary"> 
        Message ID <span data-bind="text: message.id"></span> 
        <div class="date" data-bind="text: message.createdAt"></div> 
       </div> 
       <div class="extra text" data-bind="text: message.text"></div> 
      </div> 
     </div> 
    </div> 
</div> 
<div class="ui very padded basic segment"> 
    <form class="ui form" method="post" data-bind="submit: sendMessage"> 
     <label>Your message</label> 
     <div class="ui field"> 
      <input type="text" name="message" value="" data-bind="value: newMessage"/> 
     </div> 
     <button class="ui primary button">Send</button> 
    </form> 
</div> 
<script type="text/javascript"> 
var chatModel = function(){ 
    var self = this; 
    this.messages = ko.observableArray(); 
    this.newMessage = ko.observable(''); 
    this.errors = ko.observableArray(); 

    /** 
    * Send message to chat 
    * 
    * In fact, save to server and get show saved message in list 
    */ 
    this.sendMessage = function(form){ 
     var self = this; 
     if (self.newMessage().length > 0){ 
      io.socket.post('/chat', {text: self.newMessage()}, function(data, jwr){ 
       // If the message was created successfully, add it to messages array 
       if (jwr.statusCode == 201){ 
        self.messages.push(data); 
        self.newMessage(''); 
       } else { 
        self.errors.push('ERROR: ' + jwr.statusCode); 
       } 
      }); 
     } 
    }.bind(this); 

    /** 
    * Get last 100 messages and connect to Chat websockets 
    */ 
    io.socket.get('/chat', {sort: 'createdAt', limit: 100}, function(data, jwr){ 
     if (jwr.statusCode == 200){ 
      self.messages(data); 
     } else { 
      self.errors.push('ERROR: ' + jwr.statusCode); 
     } 
    }); 

    /* 
     When a new message created by other user, add it to messages array 
    */ 
    io.socket.on('chat', function(msg){ 
     if (msg.verb == 'created'){ 
      self.messages.push(msg.data); 
     } 
    }); 
}; 

ko.applyBindings(new chatModel()); 
</script> 

Chỉ cần mở http://yoursite/chat/do và xem ma thuật =)