您的位置：首页 > 其它

Websocket学习--简易聊天室

2013-08-24 00:25 183 查看

Websocket：

websocket是专为推送业务实现的一种轻量级消息传输协议，具有占用宽带和服务器资源小、异步实时的特点

技术上可以将websocket理解为一种升级版的http协议，其格式跟http差不多。

Javascript API

new Websocket(url)

websocket.close();

四中状态（CONNECTING、OPEN、CLOSED、CLOSING）

四个回调方法（onOpen、onMessage、onClose、onError）

Java API

一个连接--->一个会话--->一个ServerEndpoint

@ServerEndpoint(value/encoder/decoder)

onOpen/onClose/onError/onMessage

@PathParam

代码示例：

ServerEndpoint

package me.ypqiao.chat_wsocket;

import java.io.IOException;
import javax.websocket.CloseReason;
import javax.websocket.EndpointConfig;
import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;

/**
*
* @author ypqiao
*/

@ServerEndpoint("/chat/{name}")
public class ChatServerEndpoint {

private static Log log = LogFactory.getLog(ChatServerEndpoint.class);

@OnOpen
public void onOpen(Session session, EndpointConfig cof,
@PathParam("name")String name){

log.debug(" "+name+" connected successfully  ");

session.getUserProperties().put("name", name);
}

@OnClose
public void onClose(Session session,CloseReason reson){

log.debug(" "+((String)session.getUserProperties()
.get("name"))+" disconnected successfully  ");

}

@OnMessage
public void onMessage(Session session,String msg){

String msgSent = msg;

for(Session s : session.getOpenSessions()){
if(s.isOpen()){
try {
s.getBasicRemote()
.sendText(((String)session.getUserProperties()
.get("name"))+": "+msgSent+"\r\n");
} catch (IOException ex) {
log.error(ex.getMessage(),ex);
}
}
}

}

@OnError
public void OnError(Session session,Throwable e){

log.error(e.getMessage(),e);

}
}

聊天室界面：

<%--
Document   : index
Created on : Aug 21, 2013, 10:35:49 AM
Author     : ypqiao
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Welcom to Chat-room</title>
<script src="js/jquery-2.0.3.min.js"></script>

<script lang="text/javascript">

var wsocket = null;

function connect(){
if(wsocket != null && (wsocket.readyState == 0 || wsocket.readyState == 1)){
wsocket.close();
}
else{
var url = "ws://"+$("#hostText").val()+":"+$("#portText").val()+"/chat_wsocket/chat/"+$("#nameText").val();
$("#tipLabel").text("connecting...");
wsocket = new WebSocket(url);
wsocket.onopen = function (evt) { onOpen(evt) };
wsocket.onclose = function (evt) { onClose(evt) };
wsocket.onmessage = function (evt) { onMessage(evt) };
wsocket.onerror = function (evt) { onError(evt) };
}
}

function send(){

if( !wsocket){
alert("connect first");
return;
}

try{
wsocket.send($("#chatText").val());
$("#chatText").val("");
}
catch( e ){
alert(" send fail,try agin...");
}

}

function onOpen(evt) {
$("#nameText").prop("readonly",true);
$("#hostText").prop("readonly",true);
$("#portText").prop("readonly",true);

$("#conButton").prop("value","disconnect");

$("#tipLabel").text("connected");
}
function onClose(evt) {

$("#nameText").prop("readonly",false);
$("#hostText").prop("readonly",false);
$("#portText").prop("readonly",false);

$("#conButton").prop("value","connect");

$("#tipLabel").text("closed");
}
function onMessage(evt) {
$("#contentArea").text( $("#contentArea").text()+evt.data);
}
function onError(evt) {
console.log('Error occured: ' + evt.data);
}

</script>

</head>
<body>
<h3>Welcom to Chat-room</h3>
<hr/>
Name:<input type="text" id="nameText"/>  
Host:<input type="text" id="hostText"/>  
Port:<input type="text" id="portText"/>  
<input type="button" value="connect" onclick="connect();" id="conButton"/><br/><br>

<textarea id="contentArea"
style="margin: 2px; width: 731px; height: 122px;" ></textarea>
<br/><br/>

Chat:<input type="text" id="chatText" width="100px"/>  
<input id="sendButton" type="button" value="send" onclick="send()">  
<label style="color: orange" id="tipLabel"></label><br/>
</body>
</html>

效果截图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航