首先Maven依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
自动配置
@Configuration public class SocketClientConfig { @Bean public ServerEndpointExporter serverEndpointExporter() { return new ServerEndpointExporter(); } }
ServerEndpointExporter 翻译过来是服务器端点导出器 具体是做什么不知道 就当是自动注入需要的配置类吧
千呼万唤使出来 -ServerEndpoint
这个就是端口服务了 先贴代码
@ServerEndpoint("/client/{sid}")
public class ISocketClientService {
private static Integer onCount=0;
private Session session;
private String sid;
private static CopyOnWriteArraySet<ISocketClientService> webSocketSet = new CopyOnWriteArraySet<ISocketClientService>();
/**
* 连接成功建立的方法
* @param session
* @param sid
*/
@OnOpen
public void onOpen(Session session, @PathParam("sid")String sid){
this.session=session;
this.sid=sid;
webSocketSet.add(this);
log.info("有新窗口开始监听:"+sid+",当前在线人数为" + ++onCount);
try {
this.session.getBasicRemote().sendText("登录成功. 当前账户sid为："+this.sid);
} catch (IOException e) {
log.error("消息发送出错");
e.printStackTrace();
}finally {
}
}
@OnClose
public void onClose(){
webSocketSet.remove(this); //从set中删除
--onCount; //在线数减1
log.info("有一连接关闭！当前在线人数为" + onCount);
}
@OnMessage
public void OnMessage(String message, Session session){
log.info("收到来自窗口"+sid+"的信息:"+message);
}
@OnError
public void onError(Session session, Throwable error) {
log.error("发生错误");
error.printStackTrace();
}
public void sendMsg(String messagem,String sid){
//判断sid是否存在
try {
this.session.getBasicRemote().sendText(this.sid);
} catch (IOException e) {
e.printStackTrace();
}
}
}
前端JS调用
<script>
var sockest;
if(typeof(WebSocket) == "undefined") {
console.log("您的浏览器不支持WebSocket");
}else{
console.log("您的浏览器支持WebSocket");
//实现化WebSocket对象，指定要连接的服务器地址与端口 建立连接
//等同于
index = new WebSocket("ws://localhost:8823/client/2");
sockest=index;
//socket = new WebSocket("${basePath}websocket/${cid}".replace("http","ws"));
//打开事件
index.onopen = function() {
console.log("Socket 已打开");
//socket.send("这是来自客户端的消息" + location.href + new Date());
};
//获得消息事件
index.onmessage = function(msg) {
console.log(msg.data);
//发现消息进入 开始处理前端触发逻辑
};
//关闭事件
index.onclose = function() {
console.log("Socket已关闭");
};
//发生了错误事件
index.onerror = function() {
alert("Socket发生了错误");
//此时可以尝试刷新页面
}
//离开页面时，关闭socket
//jquery1.8中已经被废弃，3.0中已经移除
// $(window).unload(function(){
// socket.close();
//});
}
function sendMsg() {
console.log("sendmsg");
this.sockest.send("页面发送来数据了 快接收啊。")
}
</script>
至此一个WebSocket的框子就搭好了
下一步实现
1对1聊天
多人聊天