Java教程：如何使用WebSocket向前端Vue或JavaScript页面发送消息实现实时加载数据

–在以往我们前后端通讯经常通过http接口来请求访问，当后端数据发生改变后，前端页面是无法感知的，只能通过不断地轮训请求后端接口，后端接口再去查询数据库从而返回给前端，这种方法虽然简单，但是非常消耗资源，毕竟每次请求都是需要经过三次tcp的，所以我们可以采取另一种方法，采用WebSocket的模式，前后端建立一个长连接，只要后端业务发生改变，立即想前端主动发送消息，来实现前端无感知刷新数据，接下来就讲解一下具体步骤！

第一步、创建一个后端WebSocket服务端

/**
 * websocket
 * @author [email protected]
 */@Component// 交给IOC容器@ServerEndpoint("/webSocket")// 这里的路径即前端连接的路径publicclassWebSocketService{// 定义属性privateSession session;//创建一个set用来存储用户privatestaticCopyOnWriteArraySet<WebSocketService> websockets =newCopyOnWriteArraySet<>();/**
     * 当有用户创建连接时候调用该方法
     */@OnOpenpublicvoidonOpen(Session session){// 给当前的Session赋值this.session = session;// 将当前对象添加到CopyOnWriteArraySet 中
        websockets.add(this);// 可以获取该session，但是其实也是一个内存地址System.err.println("【建立连接】 用户为："+this.session);// 获取总数，这个不难理解，实际上这个集合的总数，就是WebSocket连接的总数System.err.println("【建立连接】 总数为："+ websockets.size());}/**
     * 有用户连接断开时候触发该方法
     */@OnClosepublicvoidonClose(){
        websockets.remove(this);// 将当前的对象从集合中删除System.err.println("【连接断开】 用户为："+this.session);System.err.println("【连接断开】 总数为："+ websockets.size());}/**
     * 这个方法是客户端给服务端发送消息触发该方法
     * @param message ： 消息内容
     */@OnMessagepublicvoidonMessage(String message){System.err.println("【收到客户端发的消息】："+ message);}/**
     * 发送消息的方法，方便后期别的service调用
     *
     * @param message 消息内容
     */publicvoidsendMessage(String message){for(WebSocketService websocket : websockets){// 遍历该Set集合System.err.println("广播消息 【给用户】 ："+ websocket +"发送消息"+"【"+ message +"】");// 获取一个，在控制台打印一句话try{
                websocket.session.getBasicRemote().sendText(message);// 发送消息的方法}catch(IOException e){
                e.getMessage();}}}}

第二步、编写前端JavaScript代码

let webSocket =null;// 创建一个变量if('WebSocket'in window){// 判断当前的浏览器是否支持WebSocket// 如果支持则创建一个WebSocket赋值给刚才创建的变量// 后面的路径实际上就是一次请求，但是这里用的是WebSocket协议let host = window.location.protocol+"//"+window.location.host+"/";let serverip = host.replace('https','wss').replace('http','ws');
    webSocket =newWebSocket(serverip +'webSocket');}else{// 如果不兼容则弹框，该浏览器不支持alert('该浏览器不支持')}/**
 * 当WebSocket创建连接(初始化)会触发该方法
 */
webSocket.onopen=function(event){
    console.log('建立连接')// 这个代表在浏览器打印日志，跟Java的System.out.println()意思一致}/**
 * 当WebSocket关闭时候会触发该方法
 */
webSocket.onclose=function(event){
    console.log('关闭连接')// 同上}/**
 * 当WebSocket接受消息会触发该方法
 */
webSocket.onmessage=function(event){
    console.log('收到消息：'+event.data)let parse =JSON.parse(event.data);// 处理我们的业务}/**
 * 当WebSocket连接出错触发该方法
 */
webSocket.onerror=function(event){
    console.log('websocket发生错误',event);}/**
 * 页面关闭，WebSocket关闭
 */
window.onbeforeunload=function(){
    webSocket.close();}

第三步、编写Vue代码

methods:{/**
     * 初始化webSocket连接
     * */initWebSocket(){if(typeof WebSocket ==="undefined"){alert("您的浏览器不支持socket");}else{// 实例化socketlet host = window.location.protocol+"//"+window.location.host+"/";let serverip = host.replace('https','wss').replace('http','ws');this.socket =newWebSocket(serverip +'webSocket');// 监听socket连接this.socket.onopen=function(evt){//alert('连接服务组件成功！');
                console.log("连接成功！");};// 监听socket错误信息this.socket.onerror=function(evt){
                console.log("ERROR: "+ evt.data);};// 监听socket消息this.socket.onmessage =this.getMessage;}},/**
     * 输入日志
     * */getMessage:function(msg){let obj =JSON.parse(msg.data);
        console.log("收到消息：", obj);// 做我们的业务}},/**
 * 挂载
 */mounted(){
     初始化webSocket
     this.initWebSocket();}

第四步、启动前后端代码

• 后端发送消息代码

@AutowiredprivateWebSocketService  webSocket；

@Testpublicvoidtest(){
    webSocket.sendMessage("后端发送了一条消息");}

• 图片省略… 此时当前后端都启动成功时，前端页面打开F12查看console页面时就可以看到 “连接成功” 字样，当后端发出消息时，也会打印 “收到消息...” 字样
• 当然WebSocket还有非常多的功能，前端也可以向后端发送消息，后端也可以发送定向消息，有兴趣的朋友可以多多研究

本次教程到这里就结束了，希望大家多多关注支持（首席摸鱼师 微信同号），持续跟踪最新文章吧~