Chat 1 class Chat extends Comet Actor with

  • Slides: 12
Download presentation

Chat コンポーネントの定義 1 class Chat extends Comet. Actor with Comet. Listener { private var

Chat コンポーネントの定義 1 class Chat extends Comet. Actor with Comet. Listener { private var msgs: List[Chat. Cmd] = Nil private var bind. Line: Node. Seq = Nil def register. With = Chat. Server override def low. Priority = { case m: List[Chat. Cmd] => { val delta = m diff msgs = m update. Deltas(delta) } } Listの型をChat. Cmdに変更。 Low. Priorityの中では、ローカルのリストと新しいリストの差異をとり、ローカルのリストを更新後 にupdate. Deltasに差異を渡している。update. Deltasは後述。

Chat コンポーネントの定義 2 -1 def update. Deltas(what: List[Chat. Cmd]) { partial. Update(what. fold. Right(Noop)

Chat コンポーネントの定義 2 -1 def update. Deltas(what: List[Chat. Cmd]) { partial. Update(what. fold. Right(Noop) { case (m: Add. Message , x) => x & Append. Html("ul_dude", do. Line(m)) & Hide(m. guid) & Fade. In(m. guid, Time. Span(0), Time. Span(500)) case (Remove. Message(guid), x) => x & Fade. Out(guid, Time. Span(0), Time. Span(500)) & After(Time. Span(500), Replace(guid, Node. Seq. Empty)) }) } updata. Deltasの引数としてwhatを定義。whatのfold. Ridghtを呼び出す。 fold. Rightとは、二項関数を使い、引数からはじまりリストの全ての要素を右から左に結合する。 fold. Right [B](z : B)(f : (A, B) => B) : B partical. Updateは、引数としてJs. Cmdを受け取る。つまり、fold. Rightの二項関数下で、リスト内部 を一つのJs. Cmdオブジェクトに変換を行う。

Chat コンポーネントの定義 2 -2 def update. Deltas(what: List[Chat. Cmd]) { partial. Update(what. fold. Right(Noop)

Chat コンポーネントの定義 2 -2 def update. Deltas(what: List[Chat. Cmd]) { partial. Update(what. fold. Right(Noop) { case (m: Add. Message , x) => ⑥ x & Append. Html("ul_dude", do. Line(m)) & Hide(m. guid) & Fade. In(m. guid, Time. Span(0), Time. Span(500)) case (Remove. Message(guid), x) => x & Fade. Out(guid, Time. Span(0), Time. Span(500)) & After(Time. Span(500), Replace(guid, Node. Seq. Empty)) }) } Noopはjqueryの何もしないという空の処理。 二項関数は、現在のリスト要素と、今までの累積値の 2つの引数を受け取る。 関数内で、追加と削除処理をcaseクラスによるマッチングで分岐させ、それぞれのJs. Cmdオブジェク トを作成し、&メソッドにより結合していく。 ⑥ do. Lineは追加するHtmlを作成する処理。後述。

Index. htmlの中身 <lift: surround with="default" at="content"> <lift: comet type="Chat"> <ul id="ul_dude"> <chat: line> <li><chat:

Index. htmlの中身 <lift: surround with="default" at="content"> <lift: comet type="Chat"> <ul id="ul_dude"> <chat: line> <li><chat: msg/> <chat: btn/></li> </chat: line> </ul> <lift: form> <chat: input/> <input type="submit" value="chat"/> </lift: form> </lift: comet> </lift: surround>