socket.io 聊天示例 - 帆.js

Example of socket.io chat - sails.js

本文关键字：js io 聊天 socket      更新时间：2023-09-26

所以我试图将 socket.io 集成到我的帆项目中。然而，我在帆.js网站上找到的文档很少。我正在尝试在服务器的两个浏览器之间建立聊天。

在客户端中，我有：

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

这是：/posts/testStream：

testStream: function(req,res){
    res.view();
},

如何将数据广播到客户端以及如何将消息发送回服务器？ 如果你能给我看一个例子，那就太好了。

不知道，如果你仍然需要它。以防万一，对于我自己的实践，这里是工作示例。

我使用CSS框架Semantic-UI作为样式，使用Knockout.js用于聊天渲染。此外，所有查询都是由sails.io.js进行的。在测试之前将它们放入资产文件夹。

模型 api/models/聊天.js： 

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

控制器 api/controllers/ChatController.js：

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

查看视图/聊天/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>

只需打开 http://yoursite/chat/do，看看神奇=）

相关文章：