Rails中的WebSocket和ActionCable實戰

WebSocket是一種在客戶端和服務器之間實時、雙向通信的協議，可以實現實時更新、實時聊天等功能。在Rails中，可以使用ActionCable來實現WebSocket功能。

下面是一個簡單的實例，演示如何在Rails中使用ActionCable實現一個簡單的聊天應用：

1. 首先，在Gemfile中添加ActionCable的gem：

gem 'actioncable'

然后運行bundle install安裝gem。

2. 生成ActionCable所需的文件：

運行以下命令生成ActionCable所需的文件：

rails generate channel Chat

這會生成一個名為chat_channel.rb的文件，用于處理WebSocket連接。

3. 在app/channels/chat_channel.rb中編寫WebSocket連接的處理邏輯：

class ChatChannel < ApplicationCable::Channel
  def subscribed
    stream_from "chat_channel"
  end

  def unsubscribed
    # Any cleanup needed when channel is unsubscribed
  end

  def speak(data)
    Message.create(content: data['message'])
  end
end

在這個例子中，subscribed方法用于訂閱chat_channel頻道，speak方法用于接收客戶端發送的消息并保存到數據庫中。

4. 在app/assets/javascripts/channels/chat.coffee中編寫客戶端的WebSocket連接邏輯：

App.chat = App.cable.subscriptions.create "ChatChannel",
  connected: ->
    # Called when the subscription is ready for use on the server

  disconnected: ->
    # Called when the subscription has been terminated by the server

  received: (data) ->
    $('#messages').append('<div>' + data.message + '</div>')

  speak: (message) ->
    @perform 'speak', message: message

在這里，received方法用于處理服務器端發送過來的消息，speak方法用于向服務器發送消息。

5. 在視圖中添加聊天界面：

<div id="messages"></div>
<input type="text" id="message">
<button id="send">Send</button>

<script>
  $(function() {
    $('#send').click(function() {
      App.chat.speak($('#message').val());
      $('#message').val('');
    });
  });
</script>

在這里，當用戶點擊Send按鈕時，通過WebSocket向服務器發送消息，并將消息顯示在頁面中。

6. 啟動Rails服務，并訪問頁面：

最后，在終端中運行rails server啟動Rails服務，然后訪問頁面，就可以使用WebSocket實時聊天功能了。

這是一個簡單的實例，演示了如何在Rails中使用ActionCable實現WebSocket功能。通過使用ActionCable，可以很方便地實現實時更新、實時聊天等功能，為用戶提供更好的交互體驗。