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

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

1. /**
2. * websocket
3. * @author wfeil211@foxmail.com
4. */
5. @Component  // 交给IOC容器
6. @ServerEndpoint("/webSocket")   // 这里的路径即前端连接的路径
7. public class WebSocketService {
8.     // 定义属性
9.     private Session session;
10.     //创建一个set用来存储用户
11.     private static CopyOnWriteArraySet<WebSocketService> websockets = new CopyOnWriteArraySet<>();
13.     /**
14.      * 当有用户创建连接时候调用该方法
15.      */
16.     @OnOpen
17.     public void onOpen(Session session) {
18.         // 给当前的Session赋值
19.         this.session = session;
20.         // 将当前对象添加到CopyOnWriteArraySet 中
21.         websockets.add(this);
22.         // 可以获取该session，但是其实也是一个内存地址
23.         System.err.println("【建立连接】 用户为：" + this.session);
24.         // 获取总数，这个不难理解，实际上这个集合的总数，就是WebSocket连接的总数
25.         System.err.println("【建立连接】 总数为：" + websockets.size());
26.     }
28.     /**
29.      * 有用户连接断开时候触发该方法
30.      */
31.     @OnClose
32.     public void onClose() {
33.         websockets.remove(this); // 将当前的对象从集合中删除
34.         System.err.println("【连接断开】 用户为：" + this.session);
35.         System.err.println("【连接断开】 总数为：" + websockets.size());
36.     }
38.     /**
39.      * 这个方法是客户端给服务端发送消息触发该方法
40.      * @param message ： 消息内容
41.      */
42.     @OnMessage
43.     public void onMessage(String message) {
44.         System.err.println("【收到客户端发的消息】：" + message);
45.     }
47.     /**
48.      * 发送消息的方法，方便后期别的service调用
49.      *
50.      * @param message 消息内容
51.      */
52.     public void sendMessage(String message) {
53.         for (WebSocketService websocket : websockets) {   // 遍历该Set集合
54.             System.err.println("广播消息 【给用户】 ：" + websocket + "发送消息" + "【" + message + "】"); // 获取一个，在控制台打印一句话
55.             try {
56.                 websocket.session.getBasicRemote().sendText(message); // 发送消息的方法
57.             } catch (IOException e) {
58.                 e.getMessage();
59.             }
60.         }
61.     }
62. }

复制代码

第二步、编写前端JavaScript代码

1. let webSocket = null;   // 创建一个变量
2. if ('WebSocket' in window){  // 判断当前的浏览器是否支持WebSocket
3.     // 如果支持则创建一个WebSocket赋值给刚才创建的变量
4.     // 后面的路径实际上就是一次请求，但是这里用的是WebSocket协议
5.     let host = window.location.protocol+"//"+window.location.host+"/";
6.     let serverip = host.replace('https','wss').replace('http','ws');
7.     webSocket = new WebSocket(serverip + 'webSocket');
8. }else{  // 如果不兼容则弹框，该浏览器不支持
9.     alert('该浏览器不支持')
10. }
12. /**
13. * 当WebSocket创建连接(初始化)会触发该方法
14. */
15. webSocket.onopen = function (event){
16.     console.log('建立连接') // 这个代表在浏览器打印日志，跟Java的System.out.println()意思一致
17. }
19. /**
20. * 当WebSocket关闭时候会触发该方法
21. */
22. webSocket.onclose = function (event){
23.     console.log('关闭连接') // 同上
24. }
26. /**
27. * 当WebSocket接受消息会触发该方法
28. */
29. webSocket.onmessage = function (event){
30.     console.log('收到消息：'+event.data)
31.     let parse = JSON.parse(event.data);
32.     // 处理我们的业务
33. }
35. /**
36. * 当WebSocket连接出错触发该方法
37. */
38. webSocket.onerror = function (event){
39.     console.log('websocket发生错误',event);
40. }
42. /**
43. * 页面关闭，WebSocket关闭
44. */
45. window.onbeforeunload = function (){
46.     webSocket.close();
47. }

复制代码

第三步、编写Vue代码

1. methods: {
2.     /**
3.      * 初始化webSocket连接
4.      * */
5.     initWebSocket() {
6.         if (typeof WebSocket === "undefined") {
7.             alert("您的浏览器不支持socket");
8.         } else {
9.             // 实例化socket
10.             let host = window.location.protocol+"//"+window.location.host+"/";
11.                     let serverip = host.replace('https','wss').replace('http','ws');
12.             this.socket = new WebSocket(serverip + 'webSocket');
13.             // 监听socket连接
14.             this.socket.onopen = function (evt) {
15.                 //alert('连接服务组件成功！');
16.                 console.log("连接成功！");
17.             };
18.             // 监听socket错误信息
19.             this.socket.onerror = function (evt) {
20.                 console.log("ERROR: " + evt.data);
21.             };
22.             // 监听socket消息
23.             this.socket.onmessage = this.getMessage;
24.         }
25.     },
26.     /**
27.      * 输入日志
28.      * */
29.     getMessage: function (msg) {
30.         let obj = JSON.parse(msg.data);
31.         console.log("收到消息：", obj);
32.         // 做我们的业务
33.     }
34. },
35. /**
36. * 挂载
37. */
38. mounted() {
39.      初始化webSocket
40.      this.initWebSocket();
41. }

复制代码

第四步、启动前后端代码

• 后端发送消息代码
  

1. @Autowired
2. private WebSocketService  webSocket；
4. @Test
5. public void test(){
6.         webSocket.sendMessage("后端发送了一条消息");
7. }

复制代码

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

  复制代码
• 固然WebSocket还有非常多的功能，前端也可以向后端发送消息，后端也可以发送定向消息，有爱好的朋友可以多多研究
  

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。