文章目录

• 后端代码
• • websocket接口：
  • 开启线程监听tcp连接：
• 前端代码

---

流程：
后端开启线程监听某个端口是否接收到tcp的数据，如果接收到数据则向前端推送消息，前端接收到消息后进行接收消息的回调方法，将返回相应数据给后端，后端将生成数据，插入到数据库中

后端代码

//这个配置一定要加，否则websocket不生效 @Configuration public class WebsocketConfig {@Beanpublic ServerEndpointExporter serverEndpointExporter(){return new ServerEndpointExporter();} }

websocket接口：

@Controller @ServerEndpoint(value = "/mywebsocket/{id}") public class WebsocketServlet {//concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象，若要实现服务端与单一客户端通信的话，可以使用Map来存放，其中Key可以为用户标识private static CopyOnWriteArraySet<WebsocketServlet> webSocketSet = new CopyOnWriteArraySet<>();//这个session不是HttpSession，相当于用户的唯一标识，用它进行指定用户通讯private Session session = null;/*** 这个方法是根据自己需要添加的方法* 发送自定义信号，1表示告诉前台，数据库发生改变了，需要刷新* @throws IOException*/private void sendMessage() throws IOException{//群发消息System.out.println("执行群发消息，sendMessage");for(WebsocketServlet item:webSocketSet){try{item.session.getBasicRemote().sendText("1");}catch (IOException e){e.printStackTrace();;continue;}}}/*** 建立websocket连接时调用* @param* @return*/@OnOpenpublic void onOpen(Session session){System.out.println("Session:"+session.getId()+"已经建立连接");this.session=session;webSocketSet.add(this);//加入到set中try {session.getBasicRemote().sendText("Connection Established");} catch (IOException e) {e.printStackTrace();}}/*** 接收到客户消息时用* @param* @return*/@OnMessagepublic void onMessage(String message){System.out.println("Message" + ":"+message);}/*** 关闭连接时调用* @param* @return*/@OnClosepublic void onClose(Session session){webSocketSet.remove(this);//从set中删除System.out.println("session"+session.getId()+"has closed");}/*** 注意：OnError 只能出现一次，其中的参数都是可选的* @param* @return*/public void onError(Session session,Throwable t){t.printStackTrace();} //向数据库插入一个nameprivate boolean submit(String name) {return true;}public void sendMessage(String message){for (WebsocketServlet webSocket : webSocketSet){System.out.println("广播消息:"+message);try {webSocket.session.getBasicRemote().sendText(message);} catch (IOException e) {e.printStackTrace();}}} }

开启线程监听tcp连接：

/*** @Author* @Description* @Date 12.24**/ @Component public class TCPserver2 implements Callable {@AutowiredWebsocketServlet websocketServlet;@Overridepublic Object call() throws Exception {ServerSocket server = new ServerSocket(8005);while (true) {//（2）开始在这里暂停等待接收客户端的连接,得到一个端到端的Socket管道Socket socket = server.accept();new ServerReadThread(socket).start();System.out.println(socket.getRemoteSocketAddress() + "上线了！");}}class ServerReadThread extends Thread {private Socket socket;public ServerReadThread(Socket socket) {this.socket = socket;}@SneakyThrows@Overridepublic void run() {try ( // 创建一个ServerSocket监听8080端口的客户端请求// 由Socket获得输入流，并创建缓冲输入流BufferedInputStream in = new BufferedInputStream(socket.getInputStream());) // 由文件输出流创建缓冲输出流{ // 准备一个缓冲区byte[] buffer = new byte[1024]; // 首次从Socket读取数据int sum = 0;int len = in.read(buffer);if (len != -1) { // 写入数据到文件String msg = buffer.toString();System.out.println("8004接收到消息：" + msg);websocketServlet.sendMessage("清洗结束！");}// return 1;} catch (IOException e) {e.printStackTrace();// return 0;} finally {try {socket.close();System.out.println("closed");} catch (Exception e) {e.printStackTrace();}}}} }

主启动类加上：

TCPserver2 tcPserver2 = SpringUtils.getBean(TCPserver2.class);FutureTask<Integer> endSignal = new FutureTask<Integer>(tcPserver2);new Thread(endSignal).start();

前端代码

data () {return {endsign:'no'}},mounted(){this. createWebsocket();}methods:{// websocket的方法createWebsocket() {const httpURL = process.env.VUE_APP_DOMAIN;this.websocket = new WebSocket(`ws://192.168.100.88:9001/mywebsocket/1`);// 连接发生错误的回调方法this.websocket.onerror = this.websocketOnerror;// 连接成功建立的回调方法this.websocket.onopen = this.websocketOnopen;// 接收到消息的回调方法this.websocket.onmessage = this.websocketOnmessage;// 连接关闭的回调方法this.websocket.onclose = this.websocketOnclose;// 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。this.websocket.onbeforeunload = this.websocketOnbeforeunload;},// 连接发生错误的回调方法websocketOnerror() {console.log('连接发生错误的回调方法');},// 连接成功建立的回调方法websocketOnopen() {console.log('连接成功建立的回调方法');},// 接收到消息的回调方法websocketOnmessage(event) {const data = event.data;console.log('接收到消息的回调方法', data);this.sendTime()this.endsign='yes'},// 连接关闭的回调方法websocketOnclose() {console.log('连接关闭的回调方法');},// 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常websocketOnbeforeunload() {this.closeWebSocket();console.log('监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常');},// 关闭WebSocket连接closeWebSocket() {this.websocket.close();}}}

测试：
用网络调试精灵发送给后端一个tcp连接，然后可以看到前端显示接收到推送的消息：

后端也处理了数据并添加到了数据库中：

总结

以上是生活随笔为你收集整理的springboot+vue用websocket消息推送和监听端口的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。