springboot + vue_Springboot+VUE---实现简单的websocket

什么是websocket

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔(如每1秒)，由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。

HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

技术实现-springboot部分

1. pom.xml引入socket依赖

org.springframework.boot

spring-boot-starter-websocket

2.引入ServerEndpointExporter，这个bean会自动注册使用了@ServerEndpoint注解声明的Websocket endpoint。

package com.fire.config;

import org.springframework.context.annotation.Bean;

import org.springframework.context.annotation.Configuration;

import org.springframework.web.socket.server.standard.ServerEndpointExporter;

@Configuration

public class WebSocketConfig {

/**

* 注入ServerEndpointExporter，

* 这个bean会自动注册使用了@ServerEndpoint注解声明的Websocket endpoint

*/

@Bean

public ServerEndpointExporter serverEndpointExporter() {

return new ServerEndpointExporter();

}

}

3,wesocket供外部调用的方法

package com.fire.util;

import java.io.IOException;

import java.util.HashMap;

import java.util.Map;

import java.util.concurrent.CopyOnWriteArraySet;

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 org.springframework.stereotype.Component;

@Component

@ServerEndpoint("/websocket/{shopId}")//此注解相当于设置访问URL

public class WebSocket {

private Session session;

private static CopyOnWriteArraySet webSockets =new CopyOnWriteArraySet<>();

private static Map sessionPool = new HashMap();

@OnOpen

public void onOpen(Session session,@PathParam(value="shopId")String shopId){

this.session=session;

webSockets.add(this);

sessionPool.put(shopId, session);

System.out.println("【websockect消息】有新的连接，总数为"+webSockets.size());

}

@OnClose

public void onClose(){

webSockets.remove(this);

System.out.println("【websockect消息】断开连接，总数为"+webSockets.size());

}

@OnMessage

public void onMessage(String message){

System.out.println("【websocket消息】收到客户端消息:"+message);

this.sendAllMessage(message);

}

//广播消息

public static void sendAllMessage(String message){

for(WebSocket webSocket:webSockets){

System.out.println("【websocket消息】广播消息:"+message);

try {

webSocket.session.getAsyncRemote().sendText(message);

} catch (Exception e) {

e.printStackTrace();

}

}

}

//单点消息

public static void sendOneMessage(String shopId,String message){

System.out.println("aaaaaaaaaaaaaa");

Session session=sessionPool.get("shopId");

if(session!=null){

try {

session.getAsyncRemote().sendText(message);

} catch (Exception e) {

e.printStackTrace();

}

}

}

public static void sendInfo(String Message) throws IOException{

sendAllMessage(Message);

}

public static void main(String[] args) {

try {

sendInfo("哈哈哈哈哈 觉得封建士大夫");

} catch (IOException e) {

e.printStackTrace();

}

}

}

4.测试类

package com.fire.controller;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RestController;

import com.fire.util.WebSocket;

@RestController

@RequestMapping("api")

public class socketTestController {

@Autowired

private WebSocket webSocket;

@RequestMapping("/sendAllMessage")

public String test(){

String message="hahahahhahhhdfsdfsd";

webSocket.sendAllMessage(message);

return "xiao xi fa song wan cheng";

}

@RequestMapping("/sendOneMessage")

public String sendOneMessage(){

String message="发送单点消息";

webSocket.sendAllMessage(message);

return "单点消息发送完成";

}

}

5，启动springboot，在页面测试效果

6，前台 -VUE部分代码

{{ message }}

{{resultData}}

发送消息断开连接重新连接

import Vue from "vue";

export default {

//将模块引出在其他地方使用

name: "vueday01