WebSocket技术demo

使用springboot快速搭建测试案例

<!--  导入websocket  -->
<dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-websocket</artifactId>
      <version>1.3.5.RELEASE</version>
</dependency>

将bean注入

@Configuration
public class WebSocketConfig {
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }

}

创建一个处理请求和发送数据的类

@ServerEndpoint(value = "/websocket")
@Component
public class MyWebSocket {
    //静态变量,用来记录当前在线连接数。应该把它设计成线程安全的。
    private static int onlineCount = 0;

    //concurrent包的线程安全Set,用来存放每个客户端对应的MyWebSocket对象。
    private static CopyOnWriteArraySet<MyWebSocket> webSocketSet = new CopyOnWriteArraySet<MyWebSocket>();

    //与某个客户端的连接会话,需要通过它来给客户端发送数据
    private Session session;

    /**
     * 连接建立成功调用的方法
     */
    @OnOpen
    public void onOpen(Session session) {
        this.session = session;
        webSocketSet.add(this);     //加入set中
        addOnlineCount();           //在线数加1
        System.out.println("有新连接加入!当前在线人数为" + getOnlineCount());
        try {
            sendMessage("连接异常,请检查网络");
        } catch (IOException e) {
            System.out.println("IO异常");
        }
    }

    /**
     * 连接关闭调用的方法
     */
    @OnClose
    public void onClose() {
        webSocketSet.remove(this);  //从set中删除
        subOnlineCount();           //在线数减1
        System.out.println("有一连接关闭!当前在线人数为" + getOnlineCount());
    }

    /**
     * 收到客户端消息后调用的方法
     *
     * @param message 客户端发送过来的消息
     */
    @OnMessage
    public void onMessage(String message, Session session) {
        System.out.println("来自客户端的消息:" + message);

        //群发消息
        for (MyWebSocket item : webSocketSet) {
            try {
                item.sendMessage(message);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }

    /**
     * 发生错误时调用
     *
     * @OnError
     */
    public void onError(Session session, Throwable error) {
        System.out.println("发生错误");
        error.printStackTrace();
    }

    //发送消息
    public void sendMessage(String message) throws IOException {
        this.session.getBasicRemote().sendText(message);
    }

    /**
     * 群发自定义消息
     */
    public static void sendInfo(String message) throws IOException {
        for (MyWebSocket item : webSocketSet) {
            try {
                item.sendMessage(message);
            } catch (IOException e) {
                continue;
            }
        }
    }

    //获取在线人数
    public static synchronized int getOnlineCount() {
        return onlineCount;
    }

    //加入新人
    public static synchronized void addOnlineCount() {
        MyWebSocket.onlineCount++;
    }

    //退出
    public static synchronized void subOnlineCount() {
        MyWebSocket.onlineCount--;
    }
}

客户端代码

<!DOCTYPE html>
<html>
<head>
    <title>WebSocket实现</title>
</head>
<body>
    Welcome<br/><input id="text" type="text"/>
    <button onclick="send()">发送消息</button>
    <hr/>
    <button onclick="closeWebSocket()">关闭WebSocket连接</button>
    <hr/>
    <div id="message"></div>
</body>

<script type="text/javascript">
    var websocket = null;
    //判断当前浏览器是否支持WebSocket
    if (‘WebSocket‘ in window) {
        websocket = new WebSocket("ws://localhost:8080/demo/websocket");
    }
    else {
        alert(‘当前浏览器 Not support websocket‘)
    }

    //连接发生错误的回调方法
    websocket.onerror = function () {
        setMessageInnerHTML("WebSocket连接发生错误");
    };

    //连接成功建立的回调方法
    websocket.onopen = function () {
        setMessageInnerHTML("WebSocket连接成功");
    }

    //接收到消息的回调方法
    websocket.onmessage = function (event) {
        setMessageInnerHTML(event.data);
    }

    //连接关闭的回调方法
    websocket.onclose = function () {
        setMessageInnerHTML("WebSocket连接关闭");
    }

    //监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。
    window.onbeforeunload = function () {
        closeWebSocket();
    }

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
        document.getElementById(‘message‘).innerHTML += innerHTML + ‘<br/>‘;
    }

    //关闭WebSocket连接
    function closeWebSocket() {
        websocket.close();
    }

    //发送消息
    function send() {
        var message = document.getElementById(‘text‘).value;
        websocket.send(message);
    }
</script>
</html>

原文地址:https://www.cnblogs.com/lwjQAQ/p/11133446.html

时间: 2024-10-30 10:39:30

WebSocket技术demo的相关文章

WebSocket详解(一):初步认识WebSocket技术

1.什么是Socket?什么是WebSocket? 对于第1次听说WebSocket技术的人来说,两者有什么区别?websocket是仅仅将socket的概念移植到浏览器中的实现吗? 我们知道,在网络中的两个应用程序(进程)需要全双工相互通信(全双工即双方可同时向对方发送消息),需要用到的就是socket,它能够提供端对端通信,对于程序员来讲,他只需要在某个应用程序的一端(暂且称之为客户端)创建一个socket实例并且提供它所要连接一端(暂且称之为服务端)的IP地址和端口,而另外一端(服务端)创

spring+websocket整合(springMVC+spring+MyBatis即SSM框架和websocket技术的整合)

java-websocket的搭建非常之容易,没用框架的童鞋可以在这里下载撸主亲自调教好的java-websocket程序: Apach Tomcat 8.0.3+MyEclipse+maven+JDK1.7 spring4.0以后加入了对websocket技术的支持,撸主目前的项目用的是SSM(springMVC+spring+MyBatis)框架,所 以肯定要首选spring自带的websocket了,好,现在问题来了,撸主在网上各种狂搜猛找,拼凑了几个自称是spring websocket

Html5 WebSocket 技术介绍

WebSocket是html5规范新引入的功能,用于解决浏览器与后台服务器双向通讯的问题,使用WebSocket技术,后台可以随时向前端推送消息,以保证前后台状态统一,在传统的无状态HTTP协议中,这是“无法做到”的. 传统服务端推(server push)技术 WebSocket提出之前,为了解决后台推送消息到前台的需求,提出了一些解决方案,这些方案使用已有的技术(如ajax,iframe,flashplayer,java applet …),通过一些变通的处理来实现. 简单轮询 最简单的是前

WebSocket C# Demo

WebSocket 规范 WebSocket 协议本质上是一个基于 TCP 的协议.为了建立一个 WebSocket 连接,客户端浏览器首先要向服务器发起一个 HTTP 请求,这个请求和通常的 HTTP 请求不同,包含了一些附加头信息,其中附加头信息”Upgrade: WebSocket”表 明这是一个申请协议升级的 HTTP 请求,服务器端解析这些附加的头信息然后产生应答信息返回给客户端,客户端和服务器端的 WebSocket 连接就建立起来了,双方就可以通过这个连接通道自由的传递信息,并且这

如何在Exe和BPL插件中实现公共变量共享及窗口溶入技术Demo源码

1.Delphi编译方式介绍: 当我们在开发一个常规应用程序时,Delphi可以让我们用两种方式使用VCL,一种是把VCL中的申明单元及实现单元全部以静态编译的方式编译并链接进Exe可执行文件中,这样做的好处就是发布程序时只需要发布独立的可执行文件,当我们使用了的第三方DLL.OCX等时,无需发布*.bpl等文件,但EXE程序文件的体积会较大. 另外一种是把VCL库以运行时状态(即把VCL库中的申请单元静态编译进EXE可执行文件,而单元的实行方法则通过LoadLiabary/LoadPackag

我做的一个websocket的demo(php server)

notice: 通过命令行执行php文件  如 php -q c:\path\server.php 通过本地web服务器访问 http://127.0.0.1/websocket/index.php即可 notice: 需要php5.3或以上的执行环境,和一个web服务器如apache浏览器需支持html5 web socket这里监听 socket端口 9505,如遇到端口被占用可能需要在这两个文件内修改端口或者杀死相应端口进程 页面手机上看起来比pc上好看! 1.客户端代码 html文件 1

netty与websocket通信demo

netty v3.9.4 websocket建立前,客户端需要与服务器进行握手 确认websocket连接,也就是说在处理websocket请求前,必需要处理一些http请求. websocket到现在为止,已经有多个版本,netty有相应的对应类,这部分处理一般不需要人工干预. 如果运行正常的话,会在页面的文本框中显示1-20记数. 可以通过firefox或chrome的开发人员工具,显看浏览器与服务器的交互. 主要是HttpServerChannelHandler2,加了些注释和少量debu

websocket技术分享

开发环境: spring3+tomcat7+spring-websocket4 运行环境: windows.Linux 一.背景: 产品将要发布的消息或其他需要让客户提前知道的消息,在客户端和服务端建立连接后推送 给客户端. 二.WebSocket是什么 WebSocket协议是基于TCP的一种新的网络协议. 三.WebSocket身世挖掘 1.WebSocket是HTML5出的东西(协议),跟HTTP协议基本没有关系,只是为了兼容现有浏览器的握手规范而已 2.HTTP有1.1和1.0之说,也就

Springboot websocket学习Demo

使用的是springboot2.1.4版本 <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.1.4.RELEASE</version> <relativePath /> <!-- lookup parent from rep