spring boot + webSocket 实现简单会话与在线人数统计的demo

创建时间：2016-09-04 投稿人：浏览次数：3019

webSocket推送是常用于生产项目的模块，在我们部门做的一个汇报演示的demo中遇到了webSocket的一些问题。

自己下来看看了看webSocket的东西，结合spring boot 做了一个简单的demo;

介绍的部分大家可以参考众多的帖子，度娘

http://www.cnblogs.com/wei2yi/archive/2011/03/23/1992830.html

http://my.oschina.net/ldl123292/blog/304360

好的，现在贴一下我的代码注释写的很细，也很简单，一下就能看懂。

java:

package com.haungteng.springboot.controller.websocket;

import org.springframework.stereotype.Component;

import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;

/**
 * @author ht
 * @describle 统计在线人数的demo
 */

@Component
@ServerEndpoint("/websocket")  //该注解表示该类被声明为一个webSocket终端
public class MySocket {
    //初始在线人数
    private static int online_num = 0;
    //线程安全的socket集合
    private static CopyOnWriteArraySet<MySocket> webSocketSet = new CopyOnWriteArraySet<MySocket>();
    //会话
    private Session session;

    @OnOpen
    public void onOpen(Session session){
        this.session = session;
        webSocketSet.add(this);
        addOnlineCount();
        System.out.println("有链接加入，当前人数为:"+getOnline_num());
    }

    @OnClose
    public void onClose(){
        webSocketSet.remove(this);
        subOnlineCount();
        System.out.println("有链接关闭,当前人数为:"+getOnline_num());
    }

    @OnMessage
    public void onMessage(String message,Session session) throws IOException{
        System.out.println("来自客户端的消息:"+message);
        for(MySocket item:webSocketSet){
            this.session.getAsyncRemote().sendText("hello");
        }
    }
    public synchronized int getOnline_num(){
        return MySocket.online_num;
    }
    public synchronized int subOnlineCount(){
        return MySocket.online_num--;
    }
    public synchronized int addOnlineCount(){
        return MySocket.online_num++;
    }
}

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My WebSocket</title>
</head>
<body>
    <h2 onclick="openTanTan()" style="color:dodgerblue;text-align: center">WeTanTan</h2>
    <div id="tantanbox" style="width:800px;height:498px;margin:0 auto;">
        <div id="box-left" style="float:left;width:600px;height:500px;">
            <div id="content" style="height:350px;border:1px solid dodgerblue;"></div>
            <div id="input-content" style="height:145px;border:1px solid dodgerblue;"><textarea id="input-message" style="width:99%;height:96%"></textarea></div>
            <button id="btn1" onclick="sendMessage()" style="width:38px;height:18px;line-height:18px;border:0;margin:4px 0 0 10px;">send</button>
            <button id="btn2" onclick="ClosedWebSocket()" style="width:38px;height:18px;line-height:18px;border:0;margin:4px 0 0 10px;">close</button>
        </div>
        <div id="box-right" style="float:left;width:195px;height:497px;border:1px solid dodgerblue">
            <span style="font-size:10px;color:dodgerblue;font-weight:bold;">在线人数:</span>
            <hr/>
            <div id="count-users" style="font-size:10px;color:dodgerblue;font-weight:bold"></div>
        </div>

    </div>
</body>
    <script>
        var usernames=[];
        var username="";
        window.onload = function(){
            document.getElementById("tantanbox").style.display="none";
        };
        function openTanTan(){
            alert("open your WeTanTan chat!");
            username = window.prompt("输入你的名字:");
            //document.write("welcome to wetantan!<p id="username">"+username+"</p>");
            usernames.push(username);
            document.getElementById("tantanbox").style.display="block";

            /*--------------------开始websocket部分----------- ---------*/

            var ws = null;//申请一个websocket对象
            //判断当前浏览器是不是支持websocket
            if("window" in window){
                startWebSocket();
            }else{
                alert("NO SUPPORT!");
                return;
            }
        };

        function  startWebSocket() {
            ws = new WebSocket("ws://localhost:8080/websocket");
            document.getElementById("count-users").innerHTML="";
            ws.onclose = function () {
                sendInnerHtml("<span style="font-size: 20px;color:greenyellow;font-weight: bold">"+"Bye~~"+"</span>");
            };
            ws.onerror = function () {
                sendInnerHtml("websocket error");
            };
            ws.onopen = function (event) {
                sendInnerHtml("Welcome to WeTanTan Light social web!  "+"<span style="font-size: 30px;font-weight: bold;color:orange">"+username+"</span>");
            };
            ws.onmessage = function (e) {
                console.log(e)
                document.getElementById("count-users").innerHTML=e.data+"人";
                sendInnerHtml("<br/>"+"服务器"+":"+e.data);
            };
            //监听方法，监听websocket关闭
            window.onbeforeunload = function(){
                ws.close();
            };
        }
        function sendInnerHtml(innerHtml){
            document.getElementById("content").innerHTML+=innerHtml+"<br/>";
        };
        function ClosedWebSocket(){
            ws.close();
            setTimeout(function(){
                document.getElementById("tantanbox").style.display="none";
            },1000);
        };
        function sendMessage() {
            var message = document.getElementById("input-message").value;
            ws.send(message);
            document.getElementById("content").innerHTML="<br/>"+username+":"+message;
            document.getElementById("input-message").value="";
        };
    </script>
</html>

声明：该文观点仅代表作者本人，入门客AI创业平台信息发布平台仅提供信息存储空间服务，如有疑问请联系rumenke@qq.com。