WebSocketによるチャットルーム
3852 ワード
アイデア:サービス端末:1、Inboundクラスを作成し、Message Inbound(clientオブジェクト)2、Inboundのonメソッドone pen()、onClose()、one Message()3、ClientPools(クライアントプール)1を継承し、すべてのClientオブジェクト(データ構造)2を保存し、Cientオブジェクトを削除します.WebSocketServletを作成するサブクラスは、createWebSocketInboundメソッドを書き換え、第1ステップで作成したクラス5に戻り、注釈でServletを配置する.
クライアントClient:1、Websocketオブジェクト(「ws:/ip:port/コンテキスト/url」)を作成する2、WebSocketオブジェクトのonopen、onclose、onmessage(オブジェクト.data)、oneerrorイベントバンドル関数3、送信ボタン、webSocketオブジェクトのsendを呼び出してメッセージを送ります.
実現コード:クライアント池ClienntPools:
クライアントClient:1、Websocketオブジェクト(「ws:/ip:port/コンテキスト/url」)を作成する2、WebSocketオブジェクトのonopen、onclose、onmessage(オブジェクト.data)、oneerrorイベントバンドル関数3、送信ボタン、webSocketオブジェクトのsendを呼び出してメッセージを送ります.
実現コード:クライアント池ClienntPools:
public class ClientPools {
private static Set clients = new HashSet();
public static void addClient(MyMessageInbound client)
{
clients.add(client);
}
public static void removeClient(MyMessageInbound client)
{
clients.remove(client);
}
public static void sendMessage(String message)
{
for(MyMessageInbound client:clients)
{
try {
// client
client.getWsOutbound().writeTextMessage(CharBuffer.wrap(message));
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
}
Message Inbound:public class MyMessageInbound extends MessageInbound {
@Override
protected void onClose(int status) {
ClientPools.removeClient(this);
}
@Override
protected void onOpen(WsOutbound outbound) {
ClientPools.addClient(this);
ClientPools.sendMessage(" !");
System.out.println(" ");
}
@Override
protected void onBinaryMessage(ByteBuffer arg0) throws IOException {
// TODO Auto-generated method stub
}
@Override
protected void onTextMessage(CharBuffer arg0) throws IOException {
// , , client
System.out.println(arg0.toString());
ClientPools.sendMessage(arg0.toString());
}
}
WebSocketServlet:@WebServlet(urlPatterns = {"/testMsg"})
public class MyMessageServlet extends WebSocketServlet {
@Override
protected StreamInbound createWebSocketInbound(String arg0,
HttpServletRequest arg1) {
System.out.println("!!!!!!!!!!!!!");
return new MyMessageInbound();
}
}
htmlページコード:
<style type="text/css">
<!--
#Layer1 {
position:absolute;
left:215px;
top:27px;
width:677px;
height:400px;
z-index:1;
}
#Layer2 {
position:absolute;
left:215px;
top:441px;
width:678px;
height:72px;
z-index:2;
}
-->
</style>
<script type="text/javascript">
var webSocket = new WebSocket("ws://localhost:8080/WebSocketTalk/testMsg");
webSocket.onopen=function(){
}
webSocket.onclose=function(){
}
webSocket.onmessage=function(msgObj){
console.log(msgObj.data);
document.getElementById("Layer1").innerHTML=document.getElementById("Layer1").innerHTML+"<br/>"+msgObj.data;
}
function toSend(){
var _msg = document.getElementById("msg").value;
webSocket.send(_msg);
}
</script>
<div id="Layer1"/>
<div id="Layer2">
<label>
<textarea name="mes" cols="50" rows="2" id="msg"/>
<input type="submit" name="Submit" value=" " onclick="toSend()"/>
</label>
</div>
</code></pre>
</article>
</div>
</div>