基于Jetty8的WebSocket聊天Demo

wangwen

2013-11-08

先上代码

ChatWebSocketServlet

@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('<','&lt;').replace('>','&gt;');
            var text=m.data.substring(c+1).replace('<','&lt;').replace('>','&gt;');
            
            var chat=$('chat');
            var spanFrom = document.createElement('span');
            spanFrom.className='from';
            spanFrom.innerHTML=from+':&nbsp;';
            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:&nbsp;
    <input id='username' type='text'/>
    <input id='joinB' class='button' type='submit' name='join' value='Join'/>
  </div>
  <div id='joined' class='hidden'>
    Chat:&nbsp;
    <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

websocket string override