socket.io 聊天示例 -sails.js

Posted 2023-03-07

【中文标题】socket.io 聊天示例 -sails.js

【英文标题】：Example of socket.io chat - sails.js

【发布时间】：2015-03-14 08:01:48

【问题描述】：

所以我尝试将 socket.io 集成到我的sails 项目中。但是我在sails.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();
,

如何向客户端广播数据以及如何将消息发送回服务器？如果你能告诉我一个很好的例子。

【问题讨论】：

到目前为止，我只是想弄清楚我应该做什么。试图复制几行代码只是为了看看会发生什么，但没有什么有趣的，因为文档太少了。

你看these docs了吗？

是的，但我不明白如何使用 socket.io，我应该在哪里写下代码。它只是不清楚，因为它应该是。

如果您先尝试一下并与我们分享会更好。当您遇到困难时，我们可以为您提供帮助。

我添加了一些代码，请看一下。

【参考方案1】：

不知道，如果你还需要它。以防万一，为了我自己的实践，这里是一个工作示例。

我使用CSS framework Semantic-UI 用于样式，Knockout.js 用于聊天渲染。此外，所有查询均由sails.io.js 提出。在测试前将它们放入 assets 文件夹中。

模型 api/models/Chat.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 并看到魔法 =)

【讨论】：

所以要真正发出你使用io.socket.post(URI, JSON_MESSAGE, callback)的消息，对吗？如果我理解得很好，这应该得到赏金，因为对于像我这样的新手来说，文档确实不够清楚。

另外你如何处理控制器中的POST？

如果您使用套接字，Sails 会自动向所有连接的客户端广播消息。发件人除外。要将更改广播给发件人，您需要做更多的魔术。这就是为什么我在发送消息后做self.messages.push(data);。事实上，你不需要做更多的事情来处理控制器中的POST，因为 Sails 的Blueprint API 可以做到所有的魔法。但是要自己处理控制器中的POST，您需要在ChatController.js中编写自己的函数create、update、destroy。

此外，如果您要自己处理这些功能，而不是通过 Blueprint API，您也必须自己向客户端广播更改。