SpringBoot整合WebSocket编写的客服用户聊天室

SpringBoot整合WebSocket编写的客服用户聊天室

需要掌握的知识点

前端

• Vue
• Element-UI (框架)
• Vue-cli 脚手架

后端

• SpringBoot

项目目录结构介绍

项目演示效果

想要的这里有链接可以用来学习使用

前端代码 https://download.csdn.net/download/weixin_44012722/12370554

后端代码，就一个Controller类，导入依赖放入自己创建的SpringBoot即可使用https://download.csdn.net/download/weixin_44012722/12378716

后端代码 我在这给大家详细讲解

首先我们要要清楚WebSocket是一个协议基于HTTP上开发的，我们这个是SpringBoot整合WebSocket,SpringBoot给我们提供整合的依赖

1.引入依赖

		<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>

2.写个Controller类并给他标注上@Component和@ServerEndpoint()注解

@ServerEndpoint()的value填写访问地址，这个相当于一个接口地址@RequestMapping你可以这么理解只不过他是websocket协议的

3.看看WebSocket与HTTP的区别

4.我的理解

HTTP是一次请求一次响应，而WebSocket是建立连接，中间客户端和服务端可以任意方主动推送消息，直至连接断开。

5.SpringBoot整合WebSocket的应用

5.1 前端建立连接

this.websock = new WebSocket("ws://IP:PORT");
this.websock.onopen = this.websocketonopen;
websocketonopen: function () {
   console.log("WebSocket连接成功");
}

5.1 后端建立连接

	/**
     * 建立连接调用的方法,这个方法可以通过@PathParam获取接口上的路径参数
     *
     * @param session 会话对象
     */
    @OnOpen
    public void onOpen(Session session) {
    }

5.2 前端主动推送消息

this.websock.send(JSON.stringify(params)); //调用WebSocket send()发送信息的方法

5.2后端接收消息

	/**
     * 收到消息调用的方法，这个方法可以通过@PathParam获取接口上的路径参数
     *
     * @param session 会话对象
     */
    @OnMessage
    public void onMessage(Session session) {
    }

5.3 后端主动推送消息

//session 会话对象
session.getBasicRemote().sendText(JSONObject.toJSONString(SendMsg));

5.3 前端接收消息

this.websock.onmessage = this.websocketonmessage;
	websocketonmessage: function (e) {
}

5.4 前端连接发生错误

this.websock.onerror = this.websocketonerror;
websocketonerror: function () {
	console.log("WebSocket连接发生错误");
}

5.4 后端连接发生错误

	/**
     * 传输消息错误调用的方法
     *
     * @param error 错误对象
     */
    @OnError
    public void OnError(Throwable error) {
    }

5.5 前端断开连接

this.websock.onclose = this.websocketclose;
websocketclose: function () {
	console.log("WebSocket连接断开")
}

5.6 后端断开连接

	/**
     * 关闭连接调用的方法
     *
     * @param session 会话对象
     */
    @OnClose
    public void onClose(Session session) {
    }

6.总结

看了是不是很容易，一般自主开发WebSocket的应用不是很多，因为费精力，容易出Bug，连接性能不是高可用，一般采取是应用第三方的应用，或者选取框架开发

一键查询淘宝/拼多多内部优惠券，每日大额外卖红包，购物省钱的宝藏工具