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

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

<code>/**

* websocket

* @author wfeil211@foxmail.com

*/

@Component // 交给IOC容器

@ServerEndpoint("/webSocket") // 这里的路径即前端连接的路径

public class WebSocketService { -- -->

// 定义属性

private Session session;

//创建一个set用来存储用户

private static CopyOnWriteArraySet<WebSocketService> 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();

}

第四步、启动前后端代码

后端发送消息代码

@Autowired

private WebSocketService webSocket；

@Test

public void test(){

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

}

图片省略…

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

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

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