Websocket学习--简易聊天室

最新推荐文章于 2025-06-09 09:13:31 发布

karl1235

最新推荐文章于 2025-06-09 09:13:31 发布

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaEE

本文链接：https://blog.youkuaiyun.com/karl5421/article/details/10243535

JavaEE 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个基于WebSocket技术的聊天室应用实例，包括了Java服务端和JavaScript客户端的完整代码实现，展示了如何通过WebSocket进行实时双向通信。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

效果截图：