文档章节

WebSocketdemo

qiang123
 qiang123
发布于 2018/10/24 08:07
字数 590
阅读 23
收藏 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
博文 38
码字总数 5889
作品 0
大兴
程序员
私信 提问
看完让你彻底理解 WebSocket 原理,附完整的实战代码(包含前端和后端)

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

nnngu
2018/07/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

没有更多内容

layui弹窗滑动问题

问题:弹窗之后,父窗口总是滑动到顶部 思路:使用锚点的机制,实现关闭弹窗后滑动到锚点 ,end:function(){ ... if (location.hash== hash) { location.hash = ''; }...

关元
23分钟前
1
0
presto函数

CASE CASE expression WHEN value THEN result [ WHEN ... ] [ ELSE result ]ENDSELECT a, CASE a WHEN 1 THEN 'one' WHEN 2 THEN 't......

hutaishi
31分钟前
1
0
.git目录瘦身

瘦身过程如下: 1.复制两个最新版本 git clone ssh://git@host:port/project.git dir1/project dir2/project 2.对dir1目录的工程进行瘦身 删除所有非python文件以及其记录,并提交. git filte...

legend3
34分钟前
2
0
Debian pip3 ImportError: cannot import name 'IncompleteRead'错误解决

突然pip3不能正常使用了, 执行pip3 -V报错为如下: 瞬间崩溃,翻阅一些资料给出的解决方案均是 easy_install3 -U pip3 修复,试后仍然无法解决,随换另一种方法,重新安装pip3: apt-get re...

Sunki
36分钟前
5
0
Springboot Failed to parse configuration class [x]; nested exception

1.前言 在使用Springboot时,我们偶尔会单独引用一些特定的properties文件,在引用这些文件时,我们就应用到了注解:@PropertySource。 2.分析错误信息 Caused by: org.springframework.bea...

hengbao5
37分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部