1.引入jar包
maven方式
<!-- https://mvnrepository.com/artifact/io.undertow/undertow-websockets-jsr -->
<dependency>
<groupId>io.undertow</groupId>
<artifactId>undertow-websockets-jsr</artifactId>
<version>2.2.2.Final</version>
</dependency>
直接下载
下载链接
2.修改启动方式
之前的启动方式可能是这样
UndertowServer.start(DemoConfig.class);
这是使用UndertowServer时的启动,之前版本的不太记得了
现在需要修改成这样
UndertowServer.create(DemoConfig.class).configWeb(builder -> {
builder.addWebSocketEndpoint("com.demo.socket.MWebSocket");
}).start();
其中com.demo.socket.MyWebSocket这是需要自己去实现的一个socket类,以处理与客户端的交互
3.编写socket类
package com.mmmushroom.socket;
import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
//这里用来标注这是websocket类
@ServerEndpoint("/mysocket.ws")
public class MWebSocket {
//这里用来接收客户端发送的消息
@OnMessage
public void message(String message, Session session) {
}
//当连接关闭时会调用这个方法
@OnClose
public void close(Session session) {
}
//当连接建立时会调用这个方法
@OnOpen
public void open(Session session) {
}
//当发生错误时调用这个方法
@OnError
public void error(Session session,Throwable throwable) {
}
}
注解应该都能见名知意,其中@ServerEndpoint
中的参数为客户端访问的路径,类似于springboot的@RequestMapping
4.页面编写
这次页面就一切从简了
<div>
<button onclick="sendMessage()"> 发送消息</button>
</div>
<script>
var socket;
//首先判断是否支持WebSocket
if (window.WebSocket) {
//这里用来新建一个socket连接
//ws:// 为前缀,类似于http://其中ws就是websocket的缩写
//127.0.0.1:9999 这是IP地址加端口号,应该不用大说明
//socket.ws 这是在socket类@ServerEndpoint注解中的参数
socket = new WebSocket("ws://127.0.0.1:9999/socket.ws");
//下面四个方法理应见名知意,同java类中的功能
//接受消息后的操作
socket.onmessage = function(event) {
//独立出了一个方法来执行接收消息后的操作
message(event.data);
};
//打开连接后的操作
socket.onopen = function(event) {
console.log(event);
};
//关闭连接后的操作
socket.onclose = function(event) {
console.log(event);
};
//发生异常时的操作
socket.onerror = function(event) {
console.log(event);
};
} else {
alert("NO");
}
function message(data) {
console.log(data)
}
//向服务器发送消息
function sendMessage() {
socket.send('Hello world!!!')
}
</script>
其中大部分解释都写在注释中了
5.实践一下
java类加入打印
@OnMessage
public void message(String message, Session session) {
System.out.println("message:" + session.getId() + "-" + message);
//通过session向客户端发送消息
session.getAsyncRemote().sendText("Hello websocket!!!");
}
@OnClose
public void close(Session session) {
System.out.println("close:" + session.getId());
}
@OnOpen
public void open(Session session) {
System.out.println("open:" + session.getId());
}
@OnError
public void error(Session session, Throwable throwable) {
System.out.println("error:" + session.getId());
}
页面保持不变了就
1. 启动服务器
2. 打开前端页面
因为直接写在了script标签中,一打开页面,自动连接,并触发了onopen
服务端也是如此
3. 发送消息
首先点击页面按钮
服务端接收到了页面发送的消息
同时页面也得到了反馈