java使用webscoket实现多人点餐

超、凢脫俗 2023-10-07 16:18 4阅读 0赞

## 服务端代码 端口默认8080 ##

import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.socket.server.standard.ServerEndpointExporter;
    
    /**
     * WebSocket配置
     */
    @Configuration
    public class WebSocketConfig {
        
    
        @Bean
        public ServerEndpointExporter serverEndpointExporter () {
        
            return new ServerEndpointExporter();
        }
    
    }

import org.springframework.stereotype.Component;
    
    import javax.websocket.*;
    import javax.websocket.server.ServerEndpoint;
    import java.io.IOException;
    import java.util.concurrent.CopyOnWriteArraySet;
    import java.util.concurrent.atomic.AtomicInteger;
    
    
    @Component
    @ServerEndpoint(value = "/ws")
    public class WebSocketServer {
        
    
        //与某个客户端的连接会话，需要通过它来给客户端发送数据
        private Session session;
    
        private static final AtomicInteger OnlineCount = new AtomicInteger(0);
    
        private static CopyOnWriteArraySet<Session> SessionSet = new CopyOnWriteArraySet<>();
    
        /**
         * 连接建立成功调用的方法
         */
        @OnOpen
        public void onOpen(Session session) {
        
            SessionSet.add(session);
            this.session = session;
            int cnt = OnlineCount.incrementAndGet(); // 在线数加1
            System.out.println("有连接加入，当前连接数为：" + cnt);
        }
    
        /**
         * 连接关闭调用的方法
         */
        @OnClose
        public void onClose() {
        
            SessionSet.remove(this.session);
            int cnt = OnlineCount.decrementAndGet();
            System.out.println("有连接关闭，当前连接数为：" + cnt);
        }
    
        /**
         * 收到客户端消息后调用的方法
         * @param message 客户端发送过来的消息
         */
        @OnMessage
        public void onMessage(String message, Session session) {
        
            System.out.println(message);
            BroadCastInfo(message);
        }
    
        /**
         * 出现错误
         * @param error
         */
        @OnError
        public void onError(Throwable error) {
        
            error.printStackTrace();
        }
    
    
        /**
         * 发送消息
         *
         * @param session
         * @param message
         */
        public static void SendMessage(Session session, String message) {
        
            try {
        
                if (session.isOpen()) {
        
                    session.getBasicRemote().sendText(message);
                }
            } catch (IOException e) {
        
                e.printStackTrace();
            }
        }
    
        /**
         * 群发消息
         *
         * @param message
         * @throws IOException
         */
        public static void BroadCastInfo(String message) {
        
            for (Session session : SessionSet) {
        
                SendMessage(session, message);
            }
        }
    
        /**
         * 指定Session发送消息
         *
         * @param sessionId
         * @param message
         * @throws IOException
         */
        public static void SendMessage(String message, String sessionId) {
        
            Session session = null;
            for (Session s : SessionSet) {
        
                if (s.getId().equals(sessionId)) {
        
                    session = s;
                    break;
                }
            }
            if (session != null) {
        
                SendMessage(session, message);
            }
        }
    
    }

## 前端代码 ##

链接: [jquery仿外卖点餐购物车页面代码][jquery].  
下载下来，代码覆盖index.html和add.js文件即可

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
    <title>商品</title>
    <link rel="stylesheet" type="text/css" href="css/aui.css">
    <link rel="stylesheet" href="css/classify.css">
    <style>
    	html,body{
         height: 100%;max-width: 640px;margin:0 auto;}
    	.aui-bar-nav{
         border:none;background: #f5f5f5;}
    	.main{
         height: calc(100% - 4.5rem);}
    	
    	#tab1-con1{
         padding-bottom: 3rem;}
    	#tab1-con1,#tab1-con2{
         height: 100%;}
    	.aui-tab{
         border-bottom: solid 1px #eee;background: #f5f5f5;height: 2.25rem;}
    	.aui-tab-item{
         font-size: .75rem;color: #666;width: 25%;}
    	.aui-tab-item.aui-active{
         border:none;color: #000;position: relative;}
    	.aui-tab-item.aui-active:after{
         position: absolute;left: 40%;width: 20%;height: 2px;background: #00ae66;content: '';bottom:0;}
    </style>
    </head>
    <body>
        <header class="aui-bar aui-bar-nav">
            <a class="aui-pull-left aui-btn">
                <span class="aui-iconfont aui-icon-left"></span>
            </a>
            <div class="aui-title">商品</div>
            <div class="aui-pull-right"></div>
        </header>
    	<div class="aui-tab" id="tab">
    	    <div class="aui-tab-item aui-active">点菜</div>
    	    <div class="aui-tab-item">商家</div>
    	</div>
    	<div class="main">
    		<div class="aui-item" id="tab1-con1">
    			<div class="left-menu" id="left">
    				<ul>
    					<li><span>营养套餐</span></li>
    				</ul>
    			</div>
    			<div class="con">
    				<div class="right-con con-active" style="display: none;">
    					<ul>
    
    					</ul>
    				</div>
    			</div>
    			<div class="up1"></div>
    			<div class="shopcart-list fold-transition">
    				<div class="list-header">
    					<h1 class="title">购物车</h1>
    					<span class="empty">清空所有</span>
    				</div>
    				<div class="list-content">
    					<ul></ul>
    				</div>
    			</div>
    			<div class="footer">
    				<div class="left">
    					<div class="count_num"><span id="totalcountshow">0</span></div>
    					<span id="cartN" class="nowrap">总计：<span id="totalpriceshow">0</span>元</span> 
    				</div>
    				<div class="right">
    					<a id="btnselect" class="xhlbtn disable">去结算</a>
    				</div>
    			</div>
    		</div>
    	    <div class="aui-item aui-hide" id="tab1-con2">
    	        2
    	    </div>
    	</div>
    
    
    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="script/add.js"></script>
    <script type="text/javascript" src="script/aui-tab.js" ></script>
    <script type="text/javascript">
    	
        apiready = function() {
         
            api.parseTapmode();
        }
        var tab = new auiTab({
         
            element: document.getElementById("tab"),
    
        }, function(ret) {
         
            if (ret) {
         
                //定义获取对象的所有兄弟节点的函数，
                function siblings(elm) {
         
                    var a = [];
                    var p = elm.parentNode.children;
                    for (var i = 0, pl = p.length; i < pl; i++) {
         
                        if (p[i] !== elm) a.push(p[i]);
                    }
                    return a;
                }
                var index = ret.index;
                var activeC = document.getElementById("tab1-con" + index);
                activeC.className = "";
                for (var i = 0; i < siblings(activeC).length; i++) {
         
                    siblings(activeC)[i].className = "aui-hide";
                }
            }
        });
    	
    	
    </script>
    </body>
    </html>

## 实现效果 ##

当然要实现美团和二维火那种多人点餐还要很多逻辑，这只是最简单的demo

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjA0ODkw_size_16_color_FFFFFF_t_70]

[jquery]: https://www.jq22.com/jquery-info23206
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjA0ODkw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210430172140120.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjA0ODkw,size_16,color_FFFFFF,t_70