?
基于Jetty8的WebSocket聊天Demo
先上代码
ChatWebSocketServlet
class="java" name="code">@WebServlet("/ws/jetty")
public class ChatWebSocketServlet extends WebSocketServlet {
private static final long serialVersionUID = 911879078000755859L;
private final Set<MyWebSocket> _members = new CopyOnWriteArraySet<MyWebSocket>();
class MyWebSocket implements OnTextMessage {
private String userName = "匿名用户";
public MyWebSocket(String userName) {
if (userName != null && userName.length() > 0) {
this.userName = userName;
}
}
private Connection conn;
@Override
public void onOpen(Connection connection) {
System.out.println("onOpen" + connection.isOpen());
this.conn = connection;
_members.add(this);
}
@Override
public void onClose(int closeCode, String message) {
System.out.printf("onClose %s %s \t", closeCode, message);
_members.remove(this);
}
@Override
public void onMessage(String data) {
for (MyWebSocket s : _members) {
try {
if (s.conn.isOpen())
s.conn.sendMessage(data);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
}
public WebSocket doWebSocketConnect(HttpServletRequest request, String protocol) {
// TODO Auto-generated method stub
String name = request.getParameter("username");
System.out.println(name + "is connected protocol=" + protocol);
return new MyWebSocket(name);
}
@Override
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException,
IOException {
// TODO Auto-generated method stub
super.service(request, response);
}
}
?
?
html 页面
<html><head>
<title>WebSocket Chat</title>
<script type='text/javascript'>
if (!window.WebSocket)
alert("WebSocket not supported by this browser");
function $() { return document.getElementById(arguments[0]); }
function $F() { return document.getElementById(arguments[0]).value; }
function getKeyCode(ev) { if (window.event) return window.event.keyCode; return ev.keyCode; }
var room = {
join: function(name) {
this._username=name;
// var location = document.location.toString().replace('http://','ws://').replace('https://','wss://');
this._ws=new WebSocket("ws://"+location.host+"/w/ws/jetty");
// this._ws=new WebSocket("ws://192.168.75.90:8088/socket");
this._ws.onopen=this._onopen;
this._ws.onmessage=this._onmessage;
this._ws.onclose=this._onclose;
},
_onopen: function(){
$('join').className='hidden';
$('joined').className='';
$('phrase').focus();
room._send(room._username,'has joined!');
},
_send: function(user,message){
user=user.replace(':','_');
if (this._ws)
this._ws.send(user+':'+message);
},
chat: function(text) {
if (text != null && text.length>0 )
room._send(room._username,text);
},
_onmessage: function(m) {
if (m.data){
var c=m.data.indexOf(':');
var from=m.data.substring(0,c).replace('<','<').replace('>','>');
var text=m.data.substring(c+1).replace('<','<').replace('>','>');
var chat=$('chat');
var spanFrom = document.createElement('span');
spanFrom.className='from';
spanFrom.innerHTML=from+': ';
var spanText = document.createElement('span');
spanText.className='text';
spanText.innerHTML=text;
var lineBreak = document.createElement('br');
chat.appendChild(spanFrom);
chat.appendChild(spanText);
chat.appendChild(lineBreak);
chat.scrollTop = chat.scrollHeight - chat.clientHeight;
}else{
$('chat').append(m);
}
},
_onclose: function(m) {
this._ws=null;
$('join').className='';
$('joined').className='hidden';
$('username').focus();
$('chat').innerHTML='';
}
};
</script>
<style type='text/css'>
div { border: 0px solid black; }
div#chat { clear: both; width: 40em; height: 20ex; overflow: auto; background-color: #f0f0f0; padding: 4px; border: 1px solid black; }
div#input { clear: both; width: 40em; padding: 4px; background-color: #e0e0e0; border: 1px solid black; border-top: 0px }
input#phrase { width:30em; background-color: #e0f0f0; }
input#username { width:14em; background-color: #e0f0f0; }
div.hidden { display: none; }
span.from { font-weight: bold; }
span.alert { font-style: italic; }
</style>
</head><body>
<div id='chat'></div>
<div id='input'>
<div id='join' >
Username:
<input id='username' type='text'/>
<input id='joinB' class='button' type='submit' name='join' value='Join'/>
</div>
<div id='joined' class='hidden'>
Chat:
<input id='phrase' type='text'/>
<input id='sendB' class='button' type='submit' name='join' value='Send'/>
</div>
</div>
<script type='text/javascript'>
$('username').setAttribute('autocomplete','OFF');
$('username').onkeyup = function(ev) { var keyc=getKeyCode(ev); if (keyc==13 || keyc==10) { room.join($F('username')); return false; } return true; } ;
$('joinB').onclick = function(event) { room.join($F('username')); return false; };
$('phrase').setAttribute('autocomplete','OFF');
$('phrase').onkeyup = function(ev) { var keyc=getKeyCode(ev); if (keyc==13 || keyc==10) { room.chat($F('phrase')); $('phrase').value=''; return false; } return true; };
$('sendB').onclick = function(event) { room.chat($F('phrase')); $('phrase').value=''; return false; };
</script>
<p>
This is a demonstration of the Jetty websocket server.
</p>
</body></html>
?
?
? jetty 下载地址
http://dist.codehaus.org/jetty/jetty-hightide-8.1.0/jetty-hightide-8.1.0.RC5.tar.gz
?
启动jetty（注：jetty8.1 启动后jsp编译报错，加参数-Dorg.apache.jasper.compiler.disablejsr199=true 可以解决）
java -jar start.jar jetty.port=8088 -Dorg.apache.jasper.compiler.disablejsr199=true
?
项目打成war 包放 jetty.home 的webapps 目录即可。
?
参考链接
?http://blog.csdn.net/lixinso/article/details/6525874
?
http://blog.csdn.net/suixiang888/article/details/9959993
?
?
相关文章
