WebSocket接口服务实例,及JS客户端调用
服务端Controller
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;
import javax.annotation.Resource;
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 java.io.IOException;
import java.util.concurrent.ConcurrentHashMap;
@Slf4j
@Component
@ServerEndpoint("/websocket/{name}")
public class WebSocketController {
/**
* 与某个客户端的连接对话,需要通过它来给客户端发送消息
*/
private Session session;
/**
* 标识当前连接客户端的用户名
*/
private String name;
private static ConcurrentHashMap<String, WebSocketController> websocketSet = new ConcurrentHashMap<>();
@OnOpen
public void OnOpen(Session session, @PathParam(value = "name") String name) {
this.session = session;
this.name = name;
//name是用来表示唯一客户端,如果需要指定发送,需要指定发送通过name来区分
websocketSet.put(name, this);
log.info("[WebSocket]连接成功,当前连接人数为={}", websocketSet.size());
}
@OnClose
public void OnClose() {
websocketSet.remove(this.name);
log.info("[WebSocket]退出成功,当前连接人数为={}", websocketSet.size());
}
@OnMessage
public void OnMessage(String message) {
log.info("[WebSocket]收到消息={}", message);
groupSending("客户端的消息我已经收到了");
}
public void groupSending(String message) {
String user= "user";//服务端指定接收消息的用户
try {
if(websocketSet.get(user) != null) {
websocketSet.get(user).session.getBasicRemote().sendText(message);
}
} catch (IOException e) {
e.printStackTrace();
}
// for (String name : ()) {
// try {
// (name).().sendText(message);
// } catch (IOException e) {
// ();
// }
// }
}
}
maven引入的帮助类
<!--引入websocket-->
<dependency>
<groupId></groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
发布服务之后可用接口地址访问:
ws://localhost:8080/websocket/user
但是目前一般前端调用websocket接口,都是采取wss协议地址:
wss://域名/websocket/user
这时需要重新配置一份nginx_webSocket.conf:
#user nobody;
worker_processes 1;
#error_log logs/;
#error_log logs/ notice;
#error_log logs/ info;
#pid logs/;
events {
worker_connections 1024;
}
http {
include ;
default_type application/octet-stream;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
#gzip on;
server {
listen 80;
server_name serverIp;
#charset koi8-r;
ssl_certificate cert/;
ssl_certificate_key cert/;
#access_log logs/ main;
location /websocket {
proxy_pass http://serverIp:port;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $host;
}
error_page 500 502 503 504 /;
location = / {
root html;
}
}
配置完成后,重启nginx_webSocket.conf,即可通过wss协议地址访问该接口。
JS客户端调用实例:
<html>
<head>
<title>WebSoket Demo</title>
<script type="text/javascript">
//验证浏览器是否支持WebSocket协议
if (!window.WebSocket) {
alert("WebSocket not supported by this browser!");
}
var ws;
function display() {
var websocket = null;
if ('WebSocket' in window) {
//用于创建WebSocket对象,webSocketTest对应的是java类的注解值。
websocket = new WebSocket("wss://域名/websocket/user");
} else {
alert("当前浏览器不支持");
}
// 连接发生错误的时候回调方法;
websocket.onerror = function () {
alert("连接错误");
}
// 连接成功时建立回调方法
websocket.onopen = function () {
//WebSocket已连接上,使用send()方法发送数据
alert("连接成功");
};
// 收到消息的回调方法
websocket.onmessage = function (msg) {
setdivInnerHTML(msg.data);
};
//连接关闭的回调方法
websocket.onclose = function () {
closed();
alert("关闭成功");
};
}
function closed() {
websocket.close();
alert("点击关闭");
}
var log = function(s) {
if (document.readyState !== "complete") {
log.buffer.push(s);
} else {
document.getElementById("contentId").innerHTML += (s + "\n");
}
}
function sendMsg(){
var msg=document.getElementById("messageId");
alert(msg.value);
ws.send(msg.value);
}
</script>
</head>
<body onload="display();">
<div id="valueLabel"></div>
<textarea rows="20" cols="30" id="contentId"></textarea>
<br/>
<input name="message" id="messageId"/>
<button id="sendButton" onClick="javascript:sendMsg()" >Send</button>
</body>
</html>
如果需要设置Headers,可以参考实例
/A/RnJWBOrwzq/