文档章节

WebSocketdemo

qiang123
 qiang123
发布于 10/24 08:07
字数 590
阅读 9
收藏 0

WebSocket是html5提供的一种在单个tcp连接上进行全双工通讯的协议。

Http协议是无状态、无连接的、单向的应用层协议,采用了请求响应模型,通信请求智能有客户端发起,服务端对请求做出应答处理。

1.写demo网页

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>My WebSocket Test</title>
</head>
<body>
<span>你好</span><br/>
<input id="text" type="text"/>
<button onclick="send()">Send</button>
<button onclick="closeWebSocket()">Close</button>
<div id="message">

</div>
</body>

<script type="text/javascript">
    var websocket = null;
    //判断当前浏览器是否支持WebSocket
    if ('WebSocket' in window) {
        websocket = new WebSocket("ws://localhost:8000/chatWebsocket");
    }
    else {
        alert('Not support websocket')
    }
    //连接发生错误的回调方法
    websocket.onerror = function () {
        setMessageInnerHTML("error");
    };
    //连接成功建立的回调方法
    websocket.onopen = function (event) {
        setMessageInnerHTML("open");
    }
    //接收到消息的回调方法
    websocket.onmessage = function (event) {
        setMessageInnerHTML(event.data);
    }
    //连接关闭的回调方法
    websocket.onclose = function () {
        setMessageInnerHTML("close");
    }
    //监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。
    window.onbeforeunload = function () {
        websocket.close();
    }

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

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

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

2.编写服务端代码

package com.web.websocketdemo.websocket;

import io.netty.util.internal.ConcurrentSet;
import org.springframework.stereotype.Component;

import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
import java.util.Set;
import java.util.concurrent.atomic.AtomicInteger;

@ServerEndpoint("/chatWebsocket")
@Component
public class ChatWebSocket {

    //当前在线连接数
    private static  AtomicInteger onlineSize = new AtomicInteger(0);

    private static Set<ChatWebSocket> webSocketSet = new ConcurrentSet<ChatWebSocket>();

    private  Session session;

    @OnOpen
    public void onOpen(Session session){
        this.session = session;
        webSocketSet.add(this);
        addOnlineSize();
        System.out.println("有客户端连接 当前在线人数:"+getOnlineSize());
        sendMessage("你已成功连接");
    }

    @OnClose
    public void onClose(){

        System.out.println("关闭");
        webSocketSet.remove(this);
        subOnlineSize();
        System.out.println("有客户端关闭连接,当前在线人数为:"+getOnlineSize());
    }

    @OnMessage
    public void onMessage(String message,Session session){

        System.out.println("接收客户端消息:"+message);
        //群发
        sendInfoToAll(message);
    }

    @OnError
    public void onError(Session session,Throwable error){
        error.printStackTrace();
    }

    public void sendMessage(String message){
        this.session.getAsyncRemote().sendText(message);
    }

    public void sendInfoToAll(String message){
        webSocketSet.parallelStream().forEach(item->{
            try {
                item.sendMessage(message);
            } catch (Exception e) {
                e.printStackTrace();
            }
            System.out.println("群发消息 "+message);
        });
    }

    public int getOnlineSize(){
        return onlineSize.get();
    }

    public void addOnlineSize(){
        onlineSize.addAndGet(1);
    }

    public void subOnlineSize(){
        onlineSize.addAndGet(-1);
    }
}

3.配置websocket

@Configuration
public class WebSocketConfig {

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

4.运行,查看效果

© 著作权归作者所有

共有 人打赏支持
qiang123
粉丝 2
博文 29
码字总数 3953
作品 0
大兴
程序员
私信 提问
sockjs在ie8下的问题,连接不上

@爱兔一生 你好,想跟你请教个问题:看到你说,这个可以支持ie6,7,8,但是我下载了好几个这样的程序,ie8是连接不上的,google可以,var ws = new SockJS('http://localhost:8086/Spring4Web...

monoba
2015/07/18
1K
5
看完让你彻底理解 WebSocket 原理,附完整的实战代码(包含前端和后端)

1、前言 最近有同学问我有没有做过在线咨询功能。同时,公司也刚好让我接手一个 IM 项目。所以今天抽时间记录一下最近学习的内容。本文主要剖析了 WebSocket 的原理,以及附上一个完整的聊天...

nnngu
07/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多
设计模式 之 模板模式

设计模式 之 模板模式 抽象类定义了执行的方法(方法包含若干步骤),具体的步骤由子类重写实现。 使用场景 有多个子类共同的步骤方法 有重要的、复杂的共用方法 代码 由于模板模式比较简单,...

GMarshal
1分钟前
0
0
hadoop安装步骤

1.下载安装包(下载地址可网上查找,还要安装jdk,网上都有,在这就不列举了,这里用的是hadoop 3.1.1版本) 2.配置环境变量,并让它生效,执行命令 source /etc/profile JAVA_HOME=/usr/java/...

talen
4分钟前
0
0
txt转mobi格式

txt2mobi kindle对txt格式支持不好,无法识别章节。还是需要转换成mobi格式才可以。但一般txt转mobi的方法都是通过先将文档改成html格式(章节名用h1标签,段落用p标签),再通过calibre或kin...

zhnxin
17分钟前
0
0
一个三年Java工程师的面试总结

前言: 15年毕业到现在也近3年了,最近面试了阿里集团(菜鸟网络,蚂蚁金服)、网易、滴滴、点我达,最终收到点我达和网易offer,蚂蚁金服二面挂掉,菜鸟网络一个月了还在流程中...最终有幸去...

别打我会飞
28分钟前
3
0
Linux虚拟机安装VmwareTool

1.点击虚拟机: 2.点击安装Vmware-Tools,出现如下界面,将圈起来的拖动到桌面 3.接着打开终端,执行解压缩命令 tar -xzv -f VMwareTools-10.2.5-8068393.tar.gz 这个后面的VMwareTools-10.2....

陈刚生
45分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部