HTML5 websocket vue + java 简单使用

最新推荐文章于 2024-07-22 10:57:42 发布
最新推荐文章于 2024-07-22 10:57:42 发布
阅读量1.6k 收藏 1
点赞数
分类专栏： ECMAScript Java HTML 文章标签： websocket Java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/afr3828/article/details/80322188
版权
ECMAScript 同时被 3 个专栏收录
14 篇文章 0 订阅
订阅专栏
Java
5 篇文章 0 订阅
订阅专栏
HTML
4 篇文章 0 订阅
订阅专栏
前端（Vue）：
< template >
  < div ></ div >
</ template >

< script >
  export default {
    name: "chatRoomSurvey",
    data() {
      return {
        chatRoomWebsocket: null
      }
    },
    computed: {
      // ...
    },
    created() {
      // 初始化 websocket
      this. initWebSocket()
    },
    methods: {
      // 初始化 websocket 连接
      initWebSocket() {
        if ( typeof WebSocket != 'undefined') {
          this. supported = "支持 websocket"
        } else {
          this. supported = "不支持 websocket"
        }
        //ws地址
        const wsuri = "ws://" + this. currentUrlPath + "/websocket/" + this. $route. params. chatRoomId + "/" + this. $store. state. user. token + "/" + this. chatRoomData.hostUser;
        this. chatRoomWebsocket = new WebSocket( wsuri);
        this. chatRoomWebsocket. onerror = this. websocketOnError
        this. chatRoomWebsocket. onmessage = this. websocketOnMessage
        this. chatRoomWebsocket. onclose = this. websocketOnClose
      },
      //连接发生错误的回调方法
      websocketOnError() {
        console. log( "WebSocket 连接发生错误")
      },
      //接收到消息的回调方法
      websocketOnMessage(event) {
        // 接收消息
        let data = JSON. parse(event. data)
        // ...
      },
      //连接关闭的回调方法
      websocketOnClose(e) {
        console. log( "WebSocket 连接关闭", e)
        console. log( this. chatRoomWebsocket)
      },
      //关闭 WebSocket 连接
      websocketClose() {
        this. chatRoomWebsocket. close()
      },
      // 判断是否是 url
      isURL(str_url) {
        var strRegex = /^((https|http|ftp|rtsp|mms)?:\/\/)?(([0-9a-z_!~*'().&=+$%-]+: )?[0-9a-z_!~*'().&=+$%-]+@)?((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5]$)|([0-9a-z_!~*'()-]+\.)*([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]\.[a-z]{2,6})(:[0-9]{1,4})?((\/?)|(\/[0-9a-zA-Z_!~*'().;?:@&=+$,%#-]+)+\/?)$/;
        var re = new RegExp( strRegex);
        return re. test(str_url)
      },
      // 发送消息
      sendContent() {
        let messageData = {
          chatRoomId: this. $route. params. chatRoomId,
          chatUser: this. $store. state. user. token,
          chatAvatar: this. userInfo. userAvatar,
          chatNickName: this. userInfo. userNickNameTem + this. backgroundInfo,
          chatContent: this. text,
          chatType: "1"
        }
        if ( this. chatRoomWebsocket. readyState != '1') {
          // 如果按下按钮时socket 不是连接状态，重连并等到连接成功再发送消息
          this. initWebSocket()
          this. chatRoomWebsocket. onopen = () => {
            this. chatRoomWebsocket. send( JSON. stringify( messageData));
            this. content. push({
              askImg: this. userInfo. userAvatar,
              askContent: this. text,
              askNickName: this. userInfo. userNickNameTem + this. backgroundInfo,
              userId: this. chatRoomData.hostUser
            })
            this. $refs.sTest. value = '' // 清空输入框的内容
            // viewbox 移动到最底部
            this. viewboxScrollToBottom()
          }
        } else {
          this. chatRoomWebsocket. send( JSON. stringify( messageData));
          this. content. push({
            askImg: this. userInfo. userAvatar,
            askContent: this. text,
            askNickName: this. userInfo. userNickNameTem + this. backgroundInfo,
            userId: this. chatRoomData.hostUser
          })
          this. $refs.sTest. value = '' // 清空输入框的内容
          // viewbox 移动到最底部
          this. viewboxScrollToBottom()
        }
      },
      // viewbox 移动到最底部
      viewboxScrollToBottom() {
        if ( this. $refs. viewBox) {
          this. $nextTick(() => {
            // DOM 更新后再执行
            this. $refs. viewBox. scrollTo( this. $refs. viewBox. getScrollBody().scrollHeight + "55")
          })
        }
      },
    },
    components: {}
  }
</ script >

< style scoped >
</ style >


后端（Java）：
package com.firefly.wx.controller;

import com.firefly.chatRoomRecode.domain.ChatRoomRecode;
import com.firefly.chatRoomRecode.service.IChatRoomRecodeService;
import net.sf.json.JSONObject;
import org.springframework.stereotype. Component;
import org.springframework.web.socket.server.standard.SpringConfigurator;

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

/**
* @author Hong Jianwei <jianwei.hong @ pactera.com >
* @date 2017/12/11 13:23
*/
@ServerEndpoint(value = "/websocket/{chatRoomId}/{userId}/{hostUserId}")
@Component
public class MyWebSocket {
    //静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。
    private static int onlineCount = 0;

    //concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。若要实现服务端与单一客户端通信的话，可以使用Map来存放，其中Key可以为用户标识
    private static ConcurrentHashMap<String, MyWebSocket> webSocketSet = new ConcurrentHashMap<String, MyWebSocket>();

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

    //当前发消息的聊天室编号
    private String chatRoomId = "";

    //当前发消息的用户编号
    private String userId = "";

    //该次连接所属的聊天室的主持人 id
    private String hostUserId = "";

    /**
     * 连接建立成功调用的方法
     */
    @OnOpen
    public void onOpen( @PathParam(value = "chatRoomId") String param1, @PathParam(value = "userId") String param2, @PathParam(value = "hostUserId") String param3, Session session) throws Exception {
        chatRoomId = param1;
        userId = param2;
        hostUserId = param3;
        this. session = session;
        webSocketSet.put( "room" + param1 + "-" + "user" + param2, this); //加入 map 中
        addOnlineCount();           //在线数加1
        System. out.println( "有新连接加入！当前在线人数为" + getOnlineCount());

        // 若该用户不是主持人
        if (! userId.equals( hostUserId)) {
            // 普通用户上线时给主持人发送当前房间在线情况
            System. out.println( "普通用户上线时给主持人发送当前房间在线情况");
            sendOnlinePersonnel( chatRoomId, hostUserId);
            // 遍历 hashmap 查询主持人是否上线
            for (String key : webSocketSet.keySet()) {
                if (key.equals( "room" + param1 + "-" + "user" + hostUserId)) {
                    // 给自己发主持人已上线
                    JSONObject jso = new JSONObject();
                    jso.put( "messageType", "2");
                    jso.put( "data", true);
                    System. out.println( "自己不是主持人，主持人已上线");
                    sendMessage(jso.toString());
                    return;
                }
            }
            // 给自己发主持人未上线
            JSONObject jso = new JSONObject();
            jso.put( "messageType", "2");
            jso.put( "data", false);
            System. out.println( "自己不是主持人，主持人未上线");
            sendMessage(jso.toString());
        } else {
            // 群发主持人已上线
            JSONObject jso = new JSONObject();
            jso.put( "messageType", "2");
            jso.put( "data", true);
            System. out.println( "自己是主持人，主持人已上线");
            sendInfoForAll( chatRoomId, userId, jso.toString());
        }
    }

    /**
     * 连接关闭调用的方法
     */
    @OnClose
    public void onClose() throws Exception {
        System. out.println( "当前想要删除的webSocketSet：" + "room" + chatRoomId + "-" + "user" + userId);
        if (! userId.equals( "")) {
            webSocketSet.remove( "room" + chatRoomId + "-" + "user" + userId);  //从set中删除
            subOnlineCount();           //在线数减1
            System. out.println( "有一连接关闭！当前在线人数为" + getOnlineCount());
            // 若该用户是主持人
            if ( userId.equals( hostUserId)) {
                // 给所有人群发发主持人已下线
                JSONObject jso = new JSONObject();
                jso.put( "messageType", "2");
                jso.put( "data", false);
                sendInfoForAll( chatRoomId, userId, jso.toString());
            } else {
                // 普通用户离线时给主持人发送当前房间在线情况
                System. out.println( "普通用户下线时给主持人发送当前房间在线情况");
                sendOnlinePersonnel( chatRoomId, hostUserId);
            }
        }
    }

    /**
     * 收到客户端消息后调用的方法
     *
     * @param message 客户端发送过来的消息
     */
    @OnMessage
    public void onMessage(String message, Session session) throws Exception {
        JSONObject jsStr = JSONObject. fromObject(message);
        System. out.println( "-------------------------------------------");
        // 发来的不是查询在线情况的，也不是公告相关
        if (!jsStr.get( "chatType").toString().equals( "3") && !jsStr.get( "chatType").toString().equals( "2")) {
            // 普通文字消息需要保存到数据库中，视频或者图片另有别的后台 api 保存
            if (jsStr.get( "chatType").toString().equals( "1")) {
                System. out.println( "来自客户端的消息:" + jsStr.get( "chatContent").toString());
                // 发来的是聊天消息
                ChatRoomRecode chatRoomRecode = new ChatRoomRecode();
                chatRoomRecode.setChatContent(jsStr.get( "chatContent").toString());
                chatRoomRecode.setChatRoomId(Long. valueOf(jsStr.get( "chatRoomId").toString()));
                chatRoomRecode.setChatUser(Long. valueOf(jsStr.get( "chatUser").toString()));
                chatRoomRecode.setChatTime( new java.sql.Date( new Date().getTime()));
                chatRoomRecode.setChatType(jsStr.get( "chatType").toString());
                chatRoomRecode.setChatNickName(jsStr.get( "chatNickName").toString());
                chatRoomRecode.setChatAvatar(jsStr.get( "chatAvatar").toString());

                // 往数据库中存入聊天的信息
                IChatRoomRecodeService chatRoomRecodeService = SpringCtx. getBeanByClass(IChatRoomRecodeService. class);
                Boolean isOK = chatRoomRecodeService.insert(chatRoomRecode);
            }
            // 发送消息
            JSONObject jso = new JSONObject();
            jso.put( "chatContent", jsStr.get( "chatContent").toString());
            jso.put( "chatAvatar", jsStr.get( "chatAvatar").toString());
            jso.put( "chatNickName", jsStr.get( "chatNickName").toString());
            jso.put( "chatUser", jsStr.get( "chatUser").toString());
            // 普通的消息是 1，主持人上下线的消息是 2
            jso.put( "messageType", "1");
            sendInfoForAll( chatRoomId, userId, jso.toString());
        } else if (jsStr.get( "chatType").toString().equals( "3")) {
            // 发来的是需要查询当前聊天室人员在线情况的消息
            sendOnlinePersonnel( chatRoomId, hostUserId);
        }
    }

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


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


    /**
     * 给该聊天室的主持人发送当前聊天室内的人员在线情况
     *
     * @OnError
     */
    public static void sendOnlinePersonnel(String chatRoomId, String hostUserId) throws IOException {
        JSONObject jsonObject = new JSONObject();
        jsonObject.put( "messageType", "3");
        JSONObject jsonObjectPersonnel = new JSONObject();
        // 遍历 hashmap
        for (String key : webSocketSet.keySet()) {
            String[] keyArr = key.split( "-");
            // 房间号相同
            if (keyArr[ 0].equals( "room" + chatRoomId)) {
                jsonObjectPersonnel.put(keyArr[ 1].substring( 4), true);
            }
        }
        jsonObject.put( "onlinePersonnel", jsonObjectPersonnel);
        if (!( webSocketSet.get( "room" + chatRoomId + "-" + "user" + hostUserId) + "").equals( "null")) {
            webSocketSet.get( "room" + chatRoomId + "-" + "user" + hostUserId).sendMessage(jsonObject.toString());
        }
    }

    /**
     * 群发给该聊天室不是自己的所有人
     *
     * @OnError
     */
    public static void sendInfoForAll(String chatRoomId, String userId, String info) throws IOException {
        // 群发消息
        // 遍历 hashmap
        for (String key : webSocketSet.keySet()) {
            try {
                String[] keyArr = key.split( "-");
//                System.out.println("-------------------------------------------");
//                System.out.println("keyArr[0].equals(\"room\" + chatRoomId)");
//                System.out.println(keyArr[0].equals("room" + chatRoomId));
//                System.out.println("!keyArr[1].equals(\"user\" + userId)");
//                System.out.println(!keyArr[1].equals("user" + userId));     && !keyArr[1].equals("user" + userId)
                if (keyArr[ 0].equals( "room" + chatRoomId) && !keyArr[ 1].equals( "user" + userId)) {
                    webSocketSet.get(key).sendMessage(info);
                }
            } catch (IOException e) {
                System. out.println( "e:" + e);
                e.printStackTrace();
            }
        }
    }

    /**
     * 群发自定义消息
     */
//    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--;
    }
}
洪海洋
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
java加vue使用websocket_越写悦快乐之Vue项目如何集成WebSocket
weixin_36003005的博客
03-08 437
SockJS - 图片来自我的手机作为一名有追求的码农来说，不管是前端、后端、抑或是测试、运维，都需要保持一定的好奇心才可以，那么大家都知道Vue作为前端框架的集大成者，拥有着易用、灵活和高效的优点，那么对于在Vue项目中集成WebSocket，大家有没有实践过呢？今天我为大家分享一下如何在Vue项目中集成WebSocket。开发环境Window 10.0.17763Node 10.18.0Vis...
Vue+Java 通过websocket实现服务器与客户端双向通信操作
10-14
主要介绍了Vue+Java 通过websocket实现服务器与客户端双向通信操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
HTML5 websocket 前后端代码（Vue+Java）简单使用
洪海洋的博客
03-28 2546
备忘 前端（Vue）： &lt;template&gt; &lt;div&gt;&lt;/div&gt; &lt;/template&gt; &lt;script&gt; export default { name: "chatRoomSurvey", data() { return { chatRoomWebsocket: null ...
vue中使用websocket实现方法---详解
最新发布
m0_74079648的博客
07-22 1888
/定义window.dispatchEvent(new CustomEvent("事件名", {参数key:参数value}))//监听window.addEventListener("事件名", 参数key => {})
html5 长链接,Vue通过WebSocket建立长连接，连接
weixin_39702714的博客
06-25 505
Vue通过WebSocket建立长连接，连接使用场景：在项目开发中，后端需要处理一连串的逻辑，或者等待第三方的数据返回来进行处理之后在返回给前端，可能时间会很长，而且前端也不知道后端什么时候能处理好(时间长的话会达到10分钟左右)，如果采用普通的HTTP连接，前后端无法一直保持联系，麻烦的时候可能还需要采用轮询的机制，所以使用WebSocket连接效果还是比较好的。使用时间：在界面加载完之后，建上...
Vue中使用websocket
zuo_zuo_blog的博客
10-25 394
HTML5 WebSocket WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。 在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据...
五分钟学会HTML5的WebSocket协议
uidxiaowei的博客
11-22 231
1、背景   很多网站为了实现推送技术，所用的技术都是Ajax轮询。轮询是在特定的的时间间隔由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。HTML5新增的一些新协议WebSocket,可以提供...
基于node+vue+element ui的websocket在线客服系统（简单实现）
04-15
在这个基于Node.js、Vue.js以及Element UI的项目中，我们看到了一个大学生课程设计的实例，展示了如何利用这些技术来构建一个简单的在线客服系统。 首先，让我们详细了解一下WebSocket。WebSocket是HTML5引入的一种...
websocket在springboot+vue中的使用教程
08-25
"websocket在springboot+vue中的使用教程" 在本教程中，我们将详细介绍如何在Spring Boot和Vue中使用WebSocket。WebSocket是一种实时通信协议，允许服务器推送数据到客户端，而不需要客户端不断地请求服务器。下面...
基于Netty+SpringBoot+WebSocket+MUI+HTML5+制作的仿微信聊天APP
05-14
该项目利用了基于springboot + vue + mysql的开发...Java、Python、Node.js、Spring Boot、Django、Express、MySQL、PostgreSQL、MongoDB、React、Angular、Vue、Bootstrap、Material-UI、Redis、Docker、Kubernetes
java+FFmpeg+JavaCV实现无控件HTML页面视频实时预览，录像等，RTSP协议
04-20
综上所述，这个项目融合了多个高级IT技术，展示了如何在Java环境中集成FFmpeg和JavaCV来实现复杂的实时视频处理功能，同时利用RTSP协议和WebSocket提供无控件的HTML5视频预览和录像服务。这样的技术组合在物联网、...
vue 实现websocket发送消息并实时接收消息
10-15
主要介绍了vue 实现websocket发送消息并实时接收消息,项目结合vue脚手架和websocket来搭建，本文给大家分享实例代码，需要的朋友可以参考下
spring boot+vue+websocket带token身份认证推送消息实现
06-25
vue前端后端分离spring boot 2.0集成websocket，带身份认证实现消息推送功能
两种websocket实现的方案(html+node，vue+node)
qq_40816649的博客
10-23 1156
自定的学习计划中终于到了websocket这一块了，其实很早就像搞这一块但是之前堆积了一堆其他更重要的东西。 以前对于即时聊天的实现思路就是轮询后端的接口，这样的方式是一种“假即时聊天”，websocket才是最佳的方式。 前端出身的我自然是用node作为服务端。那么我们开始吧！！！方案一（html+node） 这种方式适用于原生的js+html项目。 客户端直接使用原生的WebSocket对象这...
WebSocket 前后端连接实例
weixin_35751194的博客
01-04 271
WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。它使得客户端和服务端可以相互发送数据。 下面是一个 WebSocket 前后端连接的示例： 前端(客户端)： const socket =new WebSocket('ws://localhost:8080'); socket.onopen = function(event) { console.log('WebSocke...
java加vue使用websocket_Websocket在Vue中的使用
weixin_34385646的博客
02-27 580
1、初始化WebSocket对象为了兼容各个浏览器所以初始化的时候针对不同的浏览器初始化调用不同的方法。2、注册Websocket的url其中CONFIG.WEBSOCKET_URL为wensocket服务地址，_this.userData.user是登录用户的用户名，这样做为了保证不同用户的websocket地址的唯一性，防止消息发生混淆。3、增加心跳检测由于网络以及websocket自身的一些...
【实践】手把手教你开发WebSocket(Vue + SpringBoot)
爱写代码的小任
12-16 477
当前版本支持 支持心跳消息, 断线重连等特性, 经过多次反复测试, 目前相对稳定socketServer.js 2. Vue main.js 定义注册全局 3. Vue app.vue 中初始化 后端部分 通过SpringBootWebTextSocketHandler.java 2. 启用websocket 自动配置 WebSocketAutoConfiguration.java 结论： 通过本文的指导，你已经学会了如何在 Vue 前端和后端实现 WebSocket 功能的开发。WebSocket 提
vue 项目中使用websocket
热门推荐
蓝胖子的博客
01-26 1万+
vue 使用websocket
简单的搭建Websocket（java+vue）
黄沙客栈
05-11 1903
简单记录一下搭建webSocket的过程 搭建webSocket非常简单，只需要以下两步 后台创建websocket配置类 后台创建websocket类 前端页面连接 后台WebSocket配置类如下 配置类，照搬即可 import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.
编写一个 JAVA+VUE+WebSocket的代码
06-07
以下是一个简单的 Java Vue WebSocket 应用程序的示例代码，其中使用了 Spring Boot 作为后端框架，前端使用 Vue.js。这个应用程序将向客户端发送一个简单的问候语，并且可以在客户端发送消息时回显该消息。 Java ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值