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

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

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

/** * websocket * @author wfeil211@foxmail.com */@Component  // 交给IOC容器@ServerEndpoint("/webSocket")   // 这里的路径即前端连接的路径public class WebSocketService {    // 定义属性    private Session session;    //创建一个set用来存储用户    private static CopyOnWriteArraySet websockets = new CopyOnWriteArraySet();    /**     * 当有用户创建连接时候调用该方法     */    @OnOpen    public void onOpen(Session session) {        // 给当前的Session赋值        this.session = session;        // 将当前对象添加到CopyOnWriteArraySet 中        websockets.add(this);        // 可以获取该session，但是其实也是一个内存地址        System.err.println("【建立连接】 用户为：" + this.session);        // 获取总数，这个不难理解，实际上这个集合的总数，就是WebSocket连接的总数        System.err.println("【建立连接】 总数为：" + websockets.size());    }    /**     * 有用户连接断开时候触发该方法     */    @OnClose    public void onClose() {        websockets.remove(this); // 将当前的对象从集合中删除        System.err.println("【连接断开】 用户为：" + this.session);        System.err.println("【连接断开】 总数为：" + websockets.size());    }    /**     * 这个方法是客户端给服务端发送消息触发该方法     * @param message ： 消息内容     */    @OnMessage    public void onMessage(String message) {        System.err.println("【收到客户端发的消息】：" + message);    }    /**     * 发送消息的方法，方便后期别的service调用     *     * @param message 消息内容     */    public void sendMessage(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 = new WebSocket(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 {            // 实例化socket            let host = window.location.protocol+"//"+window.location.host+"/";    let serverip = host.replace('https','wss').replace('http','ws');            this.socket = new WebSocket(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();}

第四步、启动前后端代码

• 后端发送消息代码

  @Autowiredprivate WebSocketService  webSocket；@Testpublic void test(){webSocket.sendMessage("后端发送了一条消息");}

  • 图片省略…

     此时当前后端都启动成功时，前端页面打开F12查看console页面时就可以看到  “连接成功” 字样，当后端发出消息时，也会打印 “收到消息...” 字样

  • 当然WebSocket还有非常多的功能，前端也可以向后端发送消息，后端也可以发送定向消息，有兴趣的朋友可以多多研究

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