เล่น comet บน rails ด้วย shooting star (2)

เอาล่ะ ได้เวลาสนุกแล้ว

พอเรามี chat แล้ว

มาทำ เครื่องดักฟังกันเถอะ ฟังได้อย่างเดียว ห้ามพูด

สร้าง controller เป็นของตัวเองแมร่งเลย

newchat_controller.rb—-

class NewchatController < ApplicationController

skip_before_filter :verify_authenticity_token # ปิด verify authen ของ rail ไปซะ

def index

session[:name] ||= 'guest'

end

# เพราะว่าใน meteor_strike มันมี javascript ที่ไปเรียก action event เราเลยต้องสร้าง action event มาด้วย



def event

message = case params[:event]

when 'init'; "connection established by #{params[:type]}."

when 'enter'; "#{params[:uid]} joined."

when 'leave'; "#{params[:uid]} left."

end

@chat = Chat.new(

:name => '(* system *)',

:created_at => Time.now,

:message => message)

render :action => 'show'  # นี่มัน render show เราเลยต้องสร้าง </strong>show.html.erb

end

end

index.html.erb—

<%= javascript_include_tag :defaults %>

<ul id='chat-list'>

</ul>

<%= meteor_strike 'chat', :uid => session[:name], :event => %Q{

new Ajax.Updater('chat-list', #{url_for(:action => 'event').to_json}, {

insertion: Insertion.Top, parameters: params})}, :noflash => true

%>

show.html.erb—

<li>
<span><%=h @chat.name %></span>
<span><%=h @chat.message %></span>
</li>

ไหนลองปรับๆหน่อยเด๊ะ

จาก vendor/plugins/meteor_strike/README

 user_identifier,
:tag => [tag1, tag2],
:event => %Q{
switch(params.event){ # พบว่ามันเลือก event ทำได้นี่หว่า
case 'enter':
/* params.uid is entered to the channel with params.tag */
break;
case 'leave':
/* params.uid is left from the channel with params.tag */
break;
case 'update':
/* params.uid is updated status in the channel */
break;
}
}
%>

งั้นลองเปลี่ยน event เป็นตามนี้เลยละกัน

<%= meteor_strike 'chat', :uid => session[:name], :event => %Q{
switch(params.event){ # พบว่ามันเลือก event ทำได้นี่หว่า
case 'enter':
/* params.uid is entered to the channel with params.tag */
#
new Ajax.Updater('chat-list', #{url_for(:action => 'event').to_json}, {
insertion: Insertion.Top, parameters: params})
break;
case 'leave':
/* params.uid is left from the channel with params.tag */
# 
new Ajax.Updater('chat-list', #{url_for(:action => 'event').to_json}, {
insertion: Insertion.Top, parameters: params})
break;
case 'update':
/* params.uid is updated status in the channel */
# new Ajax.Updater('chat-list', #{url_for(:action => 'event').to_json}, {
#  insertion: Insertion.Top, parameters: params})
break;
}
}, :noflash => true
%>

แตกมาเปง 3 อัน แล้ว comment อัน update ไว้

นั่นแน่ ไม่อัพเดตจริงๆด้วย

นี่คือ XHR เมื่อมีคน อัพเดตอะไรมา

http://localhost:8080/%5B channel name ]

screenshot-mozilla-firefox-1

ถ้ามี event มันจะเรียกไปที่ http://localhost:3000/newchat/event

=================================================

ทีนี้ ลอง พูดอย่างเดียว ห้ามฟัง บ้าง

จะเห็นว่า มันจะเป็น ajax ไปเรียก talk

talkative_controller.rb —-

class TalkativeController < ApplicationController

skip_before_filter :verify_authenticity_token

def index

session[:name] ||= 'guest'

end

def show

@chat = Chat.find(params[:id])

end

def talk

@chat = Chat.new(

:name => session[:name], :message => params[:message])

if @chat.save

content = render_component_as_string :action => 'show', :id => @chat.id # render_component_as_string : อันนี้มัน render มาทั้ง action ได้ string มาเลย

javascript = render_to_string :update do |page|

page.insert_html :top, 'chat-list', content

end

Meteor.shoot 'chat', javascript

render :update do |page|

page[:message].clear

page[:message].focus

end

else

render :nothing => true

end

end

end

index.html.erb —-

<%= javascript_include_tag :defaults %>

<% form_remote_tag(:url => {:action => 'talk'}) do |f| %>

<%= text_field_tag :message %>

<%= submit_tag 'Talk' %><br />

<% end %>

show.html.erb —-

<li>

<span><%=h @chat.name %></span>

<span><%=h @chat.message %></span>

</li>

พอจับดู พบว่า พอ submit form แล้วมันเรียกไปที่

http://localhost:3000/talkative/talk เท่านั้นเอง

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s