WebSocket简单应用
背景
最近听到很多次这个技术，学习任何技术之前首先得回答一个问题，学它干啥？
应用中使用的协议大多数场景是Http协议，HTPP协议是基于请求响应模式，并且无状态的。HTTP通信只能由客户端发起，HTTP 协议做不到服务器主动向客户端推送信息。比方呢，现在前端想时刻拿到后端最新的一个订单数量，仅有Http的话，前端需要轮训一遍遍请求后端，这样好吗，这样不特别好。轮询的效率低，非常浪费资源（因为必须不停连接，或者 HTTP 连接始终打开）。WebSocket 就是在这样的背景下出现的。
如果想对上面的概念感受的更深一些，那么得去了解下几个概念，主要的我觉得是三次握手（有次数更多的握手，想先了解下的可以先看Tcp/Ip的三次握手）、全双工通讯协议的概念)。这个可以搜搜资料多看下。
实战
项目结构如下：
pom依赖：
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
websocket两个配置类：
WebSocketConfig
package com.cmdcx.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
/**
* @author Dady Sheng
*/
@Configuration
public class WebSocketConfig {
/**
* 这个bean的注册,用于扫描带有@ServerEndpoint的注解成为websocket ,如果你使用外置的tomcat就不需要该配置文件
*/
@Bean
public ServerEndpointExporter serverEndpointExporter()
{
return new ServerEndpointExporter();
}
}
WebSocket
package com.cmdcx.config;
import java.io.IOException;
import java.util.Map;
import java.util.Set;
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 com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.google.common.collect.Maps;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component;
/**
* @author Dady Sheng
* @ServerEndpoint("/api/pushMessage/{userId}") 前端通过此 URI 和后端交互.websocket交互的具体表现在这里
* @Component 将此类的实例交给 spring 管理
* @OnOpen websocket 建立连接的注解，前端触发上面 URI 时会进入此注解标注的方法
* @OnMessage 收到前端传来的消息后执行的方法
* @OnClose 关闭连接，销毁 session
* 因为WebSocket是类似客户端服务端的形式(采用ws协议)，那么这里的WebSocketServer其实就相当于一个ws协议的Controller
* 新建一个ConcurrentHashMap webSocketMap 用于接收当前userId的WebSocket，方便IM之间对userId进行推送消息
* 思考下，为啥要使用juc的集合类呢在这
*/
@Component
@ServerEndpoint(value = "/connectWebSocket/{userId}")
public class WebSocket {
private Logger logger = LoggerFactory.getLogger(this.getClass());
/**
* 在线人数
*/
private static int onlineNumber = 0;
/**
* 以用户的姓名为key，WebSocket为对象保存起来
*/
private static Map<String, WebSocket> clients = new ConcurrentHashMap<String, WebSocket>();
/**
* 会话
*/
private Session session;
/**
* 用户名称
*/
private String userId;
/**
* 建立连接
*
* @param session 回会话
*/
@OnOpen
public void onOpen(@PathParam("userId") String userId, Session session) {
logger.info("method【onOpen】被触发");
onlineNumber++;
logger.info("现在来连接的客户id：{}，用户名：{}", session.getId(), userId);
this.userId = userId;
this.session = session;
try {
//messageType 1代表上线 2代表下线 3代表在线名单 4代表普通消息
//先给所有人发送通知，说我上线了
Map<String, Object> map1 = Maps.newHashMap();
map1.put("messageType", 1);
map1.put("userId", userId);
sendMessageAll(JSON.toJSONString(map1), userId);
//把自己的信息加入到map当中去
clients.put(userId, this);
logger.info("有连接打开。当前在线人数:{}", clients.size());
//给自己发一条消息：告诉自己现在都有谁在线
Map<String, Object> map2 = Maps.newHashMap();
map2.put("messageType", 3);
//移除掉自己
Set<String> set = clients.keySet();
map2.put("onlineUsers", set);
sendMessageTo(JSON.toJSONString(map2), userId);
} catch (IOException e) {
logger.info("{},上线的时候通知所有人发生了错误", userId);
}
}
@OnError
public void onError(Session session, Throwable error) {
logger.info("method【onError】被触发");
logger.info("服务端发生了错误:{}", error.getMessage());
}
/**
* 连接关闭
*/
@OnClose
public void onClose() {
logger.info("method【onClose】被触发");
onlineNumber--;
clients.remove(userId);
try {
//messageType 1代表上线 2代表下线 3代表在线名单 4代表普通消息
Map<String, Object> map1 = Maps.newHashMap();
map1.put("messageType", 2);
map1.put("onlineUsers", clients.keySet());
map1.put("userId", userId);
sendMessageAll(JSON.toJSONString(map1), userId);
} catch (IOException e) {
logger.info("{}:下线的时候通知所有人发生了错误", userId);
}
logger.info("有连接关闭！ 当前在线人数：{}", clients.size());
}
/**
* 收到客户端的消息
*
* @param message 消息
* @param session 会话
*/
@OnMessage
public void onMessage(String message, Session session) {
try {
logger.info("method【onMessage】被触发");
logger.info("来自客户端消息:{},客户端的id是：{}", message, session.getId());
logger.info("message------------ :{}" + message);
JSONObject jsonObject = JSON.parseObject(message);
String textMessage = jsonObject.getString("message");
String fromuserId = jsonObject.getString("userId");
String touserId = jsonObject.getString("to");
//如果不是发给所有，那么就发给某一个人
//messageType 1代表上线 2代表下线 3代表在线名单 4代表普通消息
Map<String, Object> map1 = Maps.newHashMap();
map1.put("messageType", 4);
map1.put("textMessage", textMessage);
map1.put("fromuserId", fromuserId);
if ("All".equals(touserId)) {
map1.put("touserId", "所有人");
sendMessageAll(JSON.toJSONString(map1), fromuserId);
} else {
map1.put("touserId", touserId);
logger.info("开始推送消息给:{}", touserId);
sendMessageTo(JSON.toJSONString(map1), touserId);
}
} catch (Exception e) {
e.printStackTrace();
logger.info("发生了错误了");
}
}
public void sendMessageTo(String message, String TouserId) throws IOException {
logger.info("method【sendMessageTo】被触发");
for (WebSocket item : clients.values()) {
if (item.userId.equals(TouserId)) {
logger.info("method【sendMessageTo】即将发送的消息:{}",message);
item.session.getAsyncRemote().sendText(message);
break;
}
}
}
public void sendMessageAll(String message, String FromuserId) throws IOException {
logger.info("method【sendMessageAll】被触发");
for (WebSocket item : clients.values()) {
logger.info("method【sendMessageAll】即将发送的消息:{}",message);
item.session.getAsyncRemote().sendText(message);
}
}
public static synchronized int getOnlineCount() {
return onlineNumber;
}
}
两个前端页面，这里写两个前端页面是为了区分不同用户：
index.html
<!DOCTYPE HTML>
<html>
<head>
<title>Test My WebSocket</title>
</head>
<body>
TestWebSocket
<input id="text" type="text" />
<button onclick="send()">SEND MESSAGE</button>
<button onclick="closeWebSocket()">CLOSE</button>
<div id="message"></div>
</body>
<script type="text/javascript">
var websocket = null;
//判断当前浏览器是否支持WebSocket
if('WebSocket' in window){
//连接WebSocket节点
websocket = new WebSocket("ws://localhost:9999/connectWebSocket/001");
alert('index.html create ws request')
}
else{
alert('Not support websocket')
}
//连接发生错误的回调方法
websocket.onerror = function(){
setMessageInnerHTML("error");
};
//连接成功建立的回调方法
websocket.onopen = function(event){
setMessageInnerHTML("open");
}
//接收到消息的回调方法
websocket.onmessage = function(event){
setMessageInnerHTML(event.data);
}
//连接关闭的回调方法
websocket.onclose = function(){
setMessageInnerHTML("close");
}
//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = function(){
websocket.close();
}
//将消息显示在网页上
function setMessageInnerHTML(innerHTML){
document.getElementById('message').innerHTML += innerHTML + '<br/>';
}
//关闭连接
function closeWebSocket(){
websocket.close();
}
//发送消息
function send(){
var message = document.getElementById('text').value;
websocket.send(message);
}
</script>
</html>
index2.html
<!DOCTYPE HTML>
<html>
<head>
<title>Test My WebSocket</title>
</head>
<body>
TestWebSocket
<input id="text" type="text" />
<button onclick="send()">SEND MESSAGE</button>
<button onclick="closeWebSocket()">CLOSE</button>
<div id="message"></div>
</body>
<script type="text/javascript">
var websocket = null;
//判断当前浏览器是否支持WebSocket
if('WebSocket' in window){
//连接WebSocket节点
websocket = new WebSocket("ws://localhost:9999/connectWebSocket/002");
alert('index2.html create ws request')
}
else{
alert('Not support websocket')
}
//连接发生错误的回调方法
websocket.onerror = function(){
setMessageInnerHTML("error");
};
//连接成功建立的回调方法
websocket.onopen = function(event){
setMessageInnerHTML("open");
}
//接收到消息的回调方法
websocket.onmessage = function(event){
setMessageInnerHTML(event.data);
}
//连接关闭的回调方法
websocket.onclose = function(){
setMessageInnerHTML("close");
}
//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = function(){
websocket.close();
}
//将消息显示在网页上
function setMessageInnerHTML(innerHTML){
document.getElementById('message').innerHTML += innerHTML + '<br/>';
}
//关闭连接
function closeWebSocket(){
websocket.close();
}
//发送消息
function send(){
var message = document.getElementById('text').value;
websocket.send(message);
}
</script>
</html>
可以了。把项目启动起来： 页面会调用下面这段，WebSocket中的onOpen方法将被触发。因此可以在页面上看到消息：
此刻，模拟咱们服务器给客户推送消息，有群发和单独发送，我们一一实践：
单独发送，只需要调用websocket.java里面的 sendMessageTo方法：
写个接口来测试下：
@ResponseBody
@GetMapping("/sendTo")
public String sendTo(@RequestParam("userId") String userId, @RequestParam("msg") String msg) throws IOException {
webSocket.sendMessageTo(msg,userId);
return "推送成功";
}
用postman试试，给001这个用户发个消息：
结果没问题，可以看到001的页面收到了消息，002没有收到（绝对）：
下面再来个群发：
@ResponseBody
@GetMapping("/sendAll")
public String sendAll(@RequestParam("msg") String msg) throws IOException {
webSocket.sendMessageAll(msg,"aaa");
return "推送成功";
}
两个页面都收到了，没什么问题：
然后是客户给服务端推送消息，直接操作起来： 其实就是websocket.java里面的onMessage 方法：
前端发送消息的时候遵从下面的格式：
{
"message" :" hello,我是001，我想和你做朋友",
"userId":"001",
"to":"002"
}
这个消息被后端解析之后发送给002了，002的页面也成功收到了。大家看一下就知晓了~
还有001的发送所有人，也可以定制。
总结
之后研究下整合 WebSocket ，使用STOMP协议以及相关的一些负载问题。
