SpringBoot基于websocket的网页聊天
一、入门简介
正常聊天程序需要使用消息组件ActiveMQ或者Kafka等，这里是一个Websocket入门程序。
有人有疑问这个技术有什么作用，为什么要有它？
其实我们虽然有http协议，但是它有一个缺陷就是不能主动向客户端发送消息，而我们的基于Tcp协议的Websocket能够做到，所以这在多台机器之间通信提供了大大的方便。
二、入门案例
本案例使用Springboot+WebSocket+Thymeleaf
1.1pom.xml
<!-- websocket -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
<!-- StringUtils -->
<dependency>
<groupId>org.apache.commons</groupId>
<artifactId>commons-lang3</artifactId>
</dependency>
1
2
3
4
5
6
7
8
9
10
1.2WebSocketConfig
package cn.xdl.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
/**
* 开启WebSocket支持
* @author liurui
*
*/
@Configuration
public class WebSocketConfig {
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
1.3CheckCenterController连接测试
package cn.xdl.controller;
import java.io.IOException;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
import cn.xdl.utils.result.AllResult;
/**
* 调用WebSocketServer
* @author liurui
*
*/
@Controller
@RequestMapping("/checkcenter")
public class CheckCenterController {
//页面请求
@GetMapping("/socket/{cid}")
public ModelAndView socket(@PathVariable String cid) {
ModelAndView mav=new ModelAndView("/socket");
mav.addObject("cid", cid);
return mav;
}
//推送数据接口
@ResponseBody
@RequestMapping("/socket/push/{cid}")
public AllResult pushToWeb(@PathVariable String cid,String message) {
try {
WebSocketServer.sendInfo(message,cid);
} catch (IOException e) {
e.printStackTrace();
return AllResult.build(500,cid+"#"+e.getMessage());
}
return AllResult.ok(cid);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
1.4测试socket.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>websocket</title>
<script type="text/javascript" src="http://nim.prec-robot.com/jzrobot/liurui/js/jquery.js"></script>
</head>
<body>
<h3>websocket测试页面</h3>
<input type="hidden" name="cid" th:value="${cid}" id="cid">
<input type="button" value="测试" onclick="push()">
<script>
var cid = $("#cid").val();
console.info("cid===="+cid);
var socket;
if(typeof(WebSocket) == "undefined") {
console.log("您的浏览器不支持WebSocket");
}else{
console.log("您的浏览器支持WebSocket");
//实现化WebSocket对象，指定要连接的服务器地址与端口 建立连接
//等同于socket = new WebSocket("ws://localhost:8083/checkcentersys/websocket/20");
socket = new WebSocket(("http://localhost:8888/hello-boot/websocket/"+cid).replace("http","ws"));
//打开事件
socket.onopen = function() {
console.log("Socket 已打开");
//socket.send("这是来自客户端的消息" + location.href + new Date());
};
//获得消息事件
socket.onmessage = function(msg) {
console.log(msg.data);
//发现消息进入 开始处理前端触发逻辑
};
//关闭事件
socket.onclose = function() {
console.log("Socket已关闭");
};
//发生了错误事件
socket.onerror = function() {
alert("Socket发生了错误");
//此时可以尝试刷新页面
}
//离开页面时，关闭socket
//jquery1.8中已经被废弃，3.0中已经移除
// $(window).unload(function(){
// socket.close();
//});
}
function push(){
var socket = new WebSocket(("http://localhost:8888/hello-boot/websocket/push/"+cid).replace("http","ws"));
}
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
1.5聊天ImController
package cn.xdl.controller;
import java.io.IOException;
import java.util.concurrent.ConcurrentHashMap;
import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import org.apache.commons.lang3.StringUtils;
import org.springframework.stereotype.Component;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import cn.xdl.utils.result.AllResult;
import lombok.extern.slf4j.Slf4j;
/**
* websocket通信
* @author liurui
*
*/
@ServerEndpoint("/im/{userId}")
@Component
@Slf4j
public class ImController {
//静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。
private static int onlineCount = 0;
//旧：concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。
//private static CopyOnWriteArraySet<ImController> webSocketSet = new CopyOnWriteArraySet<ImController>();
//与某个客户端的连接会话，需要通过它来给客户端发送数据
private Session session;
//新：使用map对象，便于根据userId来获取对应的WebSocket
private static ConcurrentHashMap<String,ImController> websocketList = new ConcurrentHashMap<>();
//接收sid
private String userId="";
/**
* 连接建立成功调用的方法*/
@OnOpen
public void onOpen(Session session,@PathParam("userId") String userId) {
this.session = session;
websocketList.put(userId,this);
log.info("websocketList->"+JSON.toJSONString(websocketList));
//webSocketSet.add(this); //加入set中
addOnlineCount(); //在线数加1
log.info("有新窗口开始监听:"+userId+",当前在线人数为" + getOnlineCount());
this.userId=userId;
try {
sendMessage(JSON.toJSONString(AllResult.ok("连接成功")));
} catch (IOException e) {
log.error("websocket IO异常");
}
}
/**
* 连接关闭调用的方法
*/
@OnClose
public void onClose() {
if(websocketList.get(this.userId)!=null){
websocketList.remove(this.userId);
//webSocketSet.remove(this); //从set中删除
subOnlineCount(); //在线数减1
log.info("有一连接关闭！当前在线人数为" + getOnlineCount());
}
}
/**
* 收到客户端消息后调用的方法
*
* @param message 客户端发送过来的消息*/
@OnMessage
public void onMessage(String message, Session session) {
log.info("收到来自窗口"+userId+"的信息:"+message);
if(StringUtils.isNotBlank(message)){
JSONArray list=JSONArray.parseArray(message);
for (int i = 0; i < list.size(); i++) {
try {
//解析发送的报文
JSONObject object = list.getJSONObject(i);
String toUserId=object.getString("toUserId");
String contentText=object.getString("contentText");
object.put("fromUserId",this.userId);
//传送给对应用户的websocket
if(StringUtils.isNotBlank(toUserId)&&StringUtils.isNotBlank(contentText)){
ImController socketx=websocketList.get(toUserId);
//需要进行转换，userId
if(socketx!=null){
log.debug("服务端发送给客户端信息--object:{}",object);
socketx.sendMessage(JSON.toJSONString(AllResult.ok(object)));
//此处可以放置相关业务代码，例如存储到数据库
}
}
}catch (Exception e){
e.printStackTrace();
}
}
}
}
/**
*
* @param session
* @param error
*/
@OnError
public void onError(Session session, Throwable error) {
log.error("发生错误");
error.printStackTrace();
}
/**
* 实现服务器主动推送
*/
public void sendMessage(String message) throws IOException {
this.session.getBasicRemote().sendText(message);
}
/**
* 群发自定义消息
* */
/*public static void sendInfo(String message,@PathParam("userId") String userId) throws IOException {
log.info("推送消息到窗口"+userId+"，推送内容:"+message);
for (ImController item : webSocketSet) {
try {
//这里可以设定只推送给这个sid的，为null则全部推送
if(userId==null) {
item.sendMessage(message);
}else if(item.userId.equals(userId)){
item.sendMessage(message);
}
} catch (IOException e) {
continue;
}
}
}*/
public static synchronized int getOnlineCount() {
return onlineCount;
}
public static synchronized void addOnlineCount() {
ImController.onlineCount++;
}
public static synchronized void subOnlineCount() {
ImController.onlineCount--;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
1.6聊天socket_im.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<style>
.chat_div{
width:500px;
height:500px;
border:1px solid red;
text-align:center;
}
.chat_send_div{
float:left;
width:196px;
height:498px;
border:1px solid blue;
}
.chat_receive_div{
float:right;
width:290px;
height:498px;
border:1px solid green;
}
</style>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
var socket;
function openSocket() {
if(typeof(WebSocket) == "undefined") {
console.log("您的浏览器不支持WebSocket");
}else{
console.log("您的浏览器支持WebSocket");
//实现化WebSocket对象，指定要连接的服务器地址与端口 建立连接
//等同于socket = new WebSocket("ws://localhost:8888/xxxx/im/25");
//var socketUrl="${request.contextPath}/im/"+$("#userId").val();
var socketUrl="http://localhost:8888/hello-boot/im/"+$("#userId").val();
socketUrl=socketUrl.replace("https","ws").replace("http","ws");
console.log(socketUrl)
socket = new WebSocket(socketUrl);
//打开事件
socket.onopen = function() {
console.log("websocket已打开");
//socket.send("这是来自客户端的消息" + location.href + new Date());
};
//获得消息事件
socket.onmessage = function(msg) {
console.log(msg);
//发现消息进入 开始处理前端触发逻辑contentText
//$.parseJSON(msg);
var data = msg.data;
var result = $.parseJSON(data);
var str = '';
if(result.data=="连接成功"){
console.info("test----if----"+data);
str +='<h3 style="color:blue;">';
str +='server:'+result.data;
str +='</h3>';
$(".chat_receive_div").append(str);
}else{
console.info("test---else-----"+result.data.contentText);
str +='<h3 style="color:blue;">';
str +='server:'+result.data.contentText;
str +='</h3>';
$(".chat_receive_div").append(str);
}
};
//关闭事件
socket.onclose = function() {
console.log("websocket已关闭");
};
//发生了错误事件
socket.onerror = function() {
console.log("websocket发生了错误");
}
}
}
function sendMessage() {
if(typeof(WebSocket) == "undefined") {
console.log("您的浏览器不支持WebSocket");
}else {
var str = '';
console.log("您的浏览器支持WebSocket");
console.log('[{"toUserId":"'+$("#toUserId").val()+'","contentText":"'+$("#contentText").val()+'"}]');
socket.send('[{"toUserId":"'+$("#toUserId").val()+'","contentText":"'+$("#contentText").val()+'"}]');
str +='<h3 style="color:gold;">';
str +=$("#toUserId").val()+':'+$("#contentText").val();
str +='</h3>';
$(".chat_send_div").append(str);
}
}
</script>
<body>
<p>【userId】：<div><input id="userId" name="userId" type="text" value="25"></div>
<p>【toUserId】：<div><input id="toUserId" name="toUserId" type="text" value="26"></div>
<p>【toUserId】：<div><input id="contentText" name="contentText" type="text" value="嗷嗷嗷"></div>
<p>【操作】：<div><a onclick="openSocket()">开启socket</a></div>
<p>【操作】：<div><a onclick="sendMessage()">发送消息</a></div>
<div class="chat_div">
<div class="chat_send_div">
<h3>
发送消息
</h3>
</div>
<div class="chat_receive_div">
<h3>
接受消息
</h3>
</div>
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
本程序实现SpringBoot基于websocket的网页聊天。
---------------------
SpringBoot基于websocket的网页聊天的更多相关文章
- 基于flask的网页聊天室（四）
基于flask的网页聊天室(四) 前言 接前天的内容,今天完成了消息的处理 具体内容 上次使用了flask_login做用户登录,但是直接访问login_requare装饰的函数会报401错误,这里可 ...
- workerman-chat（PHP开发的基于Websocket协议的聊天室框架）（thinkphp也是支持socket聊天的）
workerman-chat(PHP开发的基于Websocket协议的聊天室框架)(thinkphp也是支持socket聊天的) 一.总结 1.下面链接里面还有一个来聊的php聊天室源码可以学习 2. ...
- SpringBoot+Vue+WebSocket 实现在线聊天
一.前言 本文将基于 SpringBoot + Vue + WebSocket 实现一个简单的在线聊天功能 页面如下: 在线体验地址:http://www.zhengqingya.com:8101 二 ...
- Java和WebSocket开发网页聊天室
小编心语:咳咳咳,今天又是聊天室,到现在为止小编已经分享了不下两个了,这一次跟之前的又不大相同,这一次是网页聊天室,具体怎么着,还请各位看官往下看~ Java和WebSocket开发网页聊天室 一.项 ...
- 基于flask的网页聊天室（三）
基于flask的网页聊天室(三) 前言 继续上一次的内容,今天完成了csrf防御的添加,用户头像的存储以及用户的登录状态 具体内容 首先是添加csrf的防御,为整个app添加防御: from flas ...
- 基于flask的网页聊天室（二）
基于flask的网页聊天室(二) 前言 接上一次的内容继续完善,今天完成的内容不是很多,只是简单的用户注册登录,内容具体如下 具体内容 这次要加入与数据哭交互的操作,所以首先要建立相关表结构,这里使用 ...
- 基于flask的网页聊天室（一）
基于flask的网页聊天室(一) 基本目标 基于flask实现的web聊天室,具有基本的登录注册,多人发送消息,接受消息 扩展目标 除基本目标外添加当前在线人数,消息回复,markdown支持,历史消 ...
- Springboot整合WebSocket实现网页版聊天，快来围观！
- TogetherJS本地部署，基于websocket的网页即时视频、语音、文字聊天
TogetherJS分为两大部分,一个是hu文件夹中的服务端:另外一个是TogetherJS文件夹中的Together.JS文件,包含了所有的网页文字.语音等操作. 需要预先安装Node.js,可以百 ...
随机推荐
- SDUTOJ 2476Period
#include<iostream> #include<string.h> #include<stdio.h> #define N 1000010 using na ...
- HDU 1796 How many integers can you find（容斥原理+二进制/DFS）
How many integers can you find Time Limit: 12000/5000 MS (Java/Others) Memory Limit: 65536/32768 ...
- chrome.socket
chrome.socket https://chajian.baidu.com/developer/apps/socket.html#method-create 描述: 使用 chrome.socke ...
- 基于OAS设计可扩展OpenAPI
前言 随着互联网行业的兴起,开发模式已逐步转换为微服务自治:小团队开发微服务,然后通过Restful接口相互调用.开发者们越来越渴望能够使用一种“官话”进行流畅的沟通,甚至实现多种编程语言系统的自动化 ...
- 高效开发之写demo
今天花了不少时间排查发现了几个明显的错误,但是相关开发人员就是没发现,自己改了一个流程影响到了其它的.最后解决问题的关键还是通过demo找到问题原因进而解决的. 这让我再次感觉到demo的重要性,以前 ...
- POJ1264 SCUD Busters 凸包
POJ1264 有m个国家(m<=20)对每个国家给定n个城镇 这个国家的围墙是保证围住n个城镇的周长最短的多边形 必然是凸包 进行若干次导弹发射 落到一个国家内则国家被破坏 最后回答总共有多少 ...
- POJ2653 Pick-up sticks 判断线段相交
POJ2653 判断线段相交的方法 先判断直线是否相交 再判断点是否在线段上 复杂度是常数的 题目保证最后答案小于1000 故从后往前尝试用后面的线段 "压"前面的线段 排除不可能 ...
- urllib2.urlopen超时未设置导致程序卡死
没有设置timeout参数,结果在网络环境不好的情况下,时常出现read()方法没有任何反应的问题,程序卡死在read()方法里,搞了大半天,才找到问题,给urlopen加上timeout就ok了,设 ...
- 搞笑代码注释，佛祖保佑 永无BUG
佛祖保佑 永无BUG 上传图片即可生成字符画,效果还不错, https://www.fontke.com/tool/image2ascii/ 神注释大全 https://github.com/Blan ...
- 从缓冲上看阻塞与非阻塞socket在发送接收上的区别（转载）
转自:http://blog.chinaunix.net/uid-24517549-id-4044877.html 首先socket在默认情况下是阻塞状态的,这就使得发送以及接收操作处于阻塞的状态 ...