2011-09-28

用 Channel API 實作簡易聊天室

Google App Engine 自 1.4.0 版推出 Channel API,使 server 與 browser 之間可以不透過 pooling 的方式做到 server push。不過 Google 官方教學文件摻雜了井字遊戲的元素,反而無法專注於 Channel API 上。這篇文章打算用最原始的聊天室,透過實做的過程來體驗一下 Java 版 Channel API。

因為是簡易聊天室,所以只打算提供一個共用的聊天室,然後用兩個 JSP 檔來解決:room.jsp、server.jsp。room.jsp  負責處理使用者輸入訊息、顯示對話;server.jsp(應該寫成 servlet 比較好,因為是簡易聊天室......)負責接收訊息、並廣播出去。

對應到 Channel API 的用詞,一個聊天室就是一個 channel,同一個 channel 的成員(client 端)就會接收到其他成員所發出的訊息(message)。所以,從 server 的角度,需要作這些事情:
  1. 開啟一個 channel
  2. 給加入這個 channel 的 client 專屬識別碼(token)
  3. 接收訊息的管道
  4. 發送訊息的功能
在 Channel API 當中只要決定 channel 的 名字就算做到第一點了,因為是簡易聊天室,所以把名稱訂死為「PsMonkey」。產生 token 的方法是:
//Java code
ChannelService channel = ChannelServiceFactory.getChannelService();
String token = channel.createChannel("PsMonkey");

因為是簡易聊天室,所以把 token 透過 JSP 產生、並塞進 client 端的 JavaScript 碼。

接下來看 client 端的部份。首先建立連線的部份:
//JavaScript code
var channel = new goog.appengine.Channel("<%=token%>");  //token 傳入
var handler = {
	'onopen' : onOpened,  //建立連線、channel.open() 就會觸發
	'onmessage' : onMessage,  //有訊息傳入時
	'onerror' : onError,  //發生錯誤時
	'onclose' : onClosed,  //連線結束時
};
socket = channel.open(handler);

socket 就是實際處理通訊的部份。這段的重點是透過 handler 設訂 socket 各種狀況會觸發的 method。仔細想一下就會發現:「只有接收訊息的 method,那傳送訊息呢?」

Channel API 要解決的問題是 server push,client 端傳送訊息的功能並不包含在其中,得透過 HTTP request 來作到。所以送訊息的 method 會長的像這樣:
//JavaScript code
sendMessage = function(message) {
	var xhr = new XMLHttpRequest();
	xhr.open('POST', 'server.jsp?msg='+message, true);
	xhr.send();
};

於是用 sendMessage() 來設定在 client 端連線時送出「____ 進入聊天室」、離線時送出「____ 離開聊天室」:
//JavaScript code
onOpened = function() {
	sendMessage("「"+name + "」進入聊天室......");
};

onClosed = function(){
	sendMessage("「"+name + "」離開聊天室......");
}

有訊息進來的時候,就把訊息塞進某一個 element 的尾巴。這邊要注意一點,參數 msg 不是單純的字串,而是一個物件,data 這個 field 才是真正回傳的資料。
//JavaScript code
onMessage = function(msg) {
	document.getElementById("output").innerHTML += msg.data +"<br />";
}

接著來看一下負責處理 client 端 sendMessage() 的 server.jsp,直接貼程式碼:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@page import="com.google.appengine.api.channel.*"%>
<%
String message = request.getParameter("msg");
ChannelService channel = ChannelServiceFactory.getChannelService();
channel.sendMessage(
	new ChannelMessage("PsMonkey", message)
);
%>

在從 request 當中取得 clinet 端傳上來的訊息後,連同 channel 的名稱包成一個  ChannelMessage,透過 ChannelService.sendMessage() 傳出去,就會觸發 client 端的 socket.onMessage 了。

再透過一些簡單的 HTML 與 JavaScript 來讓 client 端送出訊息時能呼叫到 sendMessage(),聊天室就完成了!是不是很簡單呢? [扭扭]

最後補充 socket 的幾件事情:

  • onerror 會傳入一個參數,其中有兩個 field:
    • description:錯誤的描述
    • code:HTTP 錯誤代碼
    • 目前只測出 idle 太久、server 切斷連線時會觸發
  • socket 還有一個 method:close(),呼叫成功會觸發 socket.onclose
完整可以跑的範例放在這裡...