温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

如何用JSP实现WebSocket双向通信

发布时间:2020-06-19 14:06:14 来源:亿速云 阅读:1921 作者:元一 栏目:web开发

  简介

  JSP(JavaServer Pages)是由Sun Microsystems公司倡导、许多公司参与一起建立的一种动态网页技术标准。JSP技术有点类似ASP技术,它是在传统的网页HTML文件(*.htm,*.html)中插入Java程序段(Scriptlet)和JSP标记(tag),从而形成JSP文件(*.jsp)。

  WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket通信协议于2011年被IETF定为标准RFC 6455,并由RFC7936补充规范。  WebSocket API也被W3C定为标准。

  重点

  1、JAVA内的WebSocket是在Java jar7.0之后才能使用的。

  2、需要在JavaServer项目lib目录下引入 javaee-api-7.0 包

  |前端代码

  |后端JAVA代码

  package websocketPro;

  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.util.HashSet;

  import java.util.Set;

  import java.util.Map;

  import java.util.concurrent.ConcurrentHashMap;

  import java.util.concurrent.CopyOnWriteArraySet;

  /**

  * writer: holien Time: 2017-08-01 13:00 Intent: webSocket服务器

  */

  @ServerEndpoint("/webSocket/ChatRoom/{roomName}")//这里是你请求的生成的房间服务器路径 roomName是前端发来的 roomName名字

  public class ChatRoom {

  private static final Map> rooms = new ConcurrentHashMap();

  @OnOpen //session 是可选的参数,session为与某个客户端的连接会话,需要通过它来给客户端发送数据

  public void connect(@PathParam("roomName") String roomName, Session session) throws Exception {

  if (!rooms.containsKey(roomName)) {

  Set room = new HashSet<>();

  room.add(session);

  rooms.put(roomName, room);

  } else {

  rooms.get(roomName).add(session);

  }

  System.out.println("建立连接 !");

  }

  @OnClose

  public void disConnect(@PathParam("roomName") String roomName, Session session) {

  rooms.get(roomName).remove(session);

  System.out.println("断开连接!");

  }

  @OnMessage

  public void receiveMsg(@PathParam("roomName") String roomName, String msg, Session session) throws Exception {

  System.out.println(msg);

  broadcast(roomName, msg);

  }

  // 按照房间名进行广播

  public static void broadcast(String roomName, String msg) throws Exception {

  for (Session session : rooms.get(roomName)) {

  session.getAsyncRemote().sendText(msg);

  }

  }

  }

  |JAVA服务器目录结构

  Tip:下面简单的解释一下每个函数及其方法的含义和关联。

  所有WebSocket项目双向通信的建立,都需要前端先发送给后端一个请求,并且握手成功之后才能进行通信 就和打电话一个道理。

  webSocket = new WebSocket(url);

  上面这个就是前端JS创建一个WebSocket对象 并且发送给后端(URL地址的服务器)一个通信请求 你正在向一个人打电话,并且等他接电话

  @ServerEndpoint("/webSocket/ChatRoom/{roomName}")

  var url = "ws://172.16.245.232:8080/WebsocketPro/webSocket/mainBlock/" + roomName;

  后端java这个注释标记了当前这个Java文件的服务器访问地址和前端的请求的地址是一致的。

  前端定义 roomName 的名称会被后端的 {roomName} 读取到

  之前 前端的roomName定义为 MainBlock

  所以在请求之后后端注释内的访问路径就变成了

  /webSocket/ChatRoom/MainBlock

  private static final Map> rooms = new ConcurrentHashMap();

  @OnOpen

  public void connect(@PathParam("roomName") String roomName, Session session) throws Exception {

  if (!rooms.containsKey(roomName)) {

  Set room = new HashSet<>(); //创建Hash数组 的数理化对象

  room.add(session); //把session对象 即用户对象 添加到Hash对象里

  rooms.put(roomName, room); //并且根据房间名添加用户组成的 Hash对象 这里就获取了一个用户集

  } else {

  rooms.get(roomName).add(session); //获取对应房间的 用户集

  }

  System.out.println("建立连接 !");

  }

  关于 ConcurrentHashMap 参考ConcurrentHashMap

  此时在申请之后会被后端的 @OnOpen注释下的方法接收到

  这个时候底层WebSocket会进行和前端的握手协议 我们是看不到的

  诺访问正常并且握手成功,则服务器会自动调用这个连接方法

  此时底层会向服务器发送成功握手的协议

  并且前端也会调用下面这个定义的的方法

  webSocket.onopen = function () {

  console.log("和服务器的握手连接建立...(握手)")

  };

  到这里为止 前端和后端建立了一个理论上永久的通信协议,只要其中一方不要断开连接。 你成功和他打通了电话

  |开始交流

  webSocket.send(msg);

  我们前端调用了WebSocket对象的 send() 方法 传入要发送给后台的消息

  封装要发送到服务端的数据一般来说JSON比较好

  @OnMessage

  public void receiveMsg(@PathParam("roomName") String roomName, String msg, Session session) throws Exception {

  System.out.println(msg);

  broadcast(roomName, msg);

  }

  传入的消息就会被后台的 @OnMessage 标记的方法接收

  @PathParam(“roomName”) String roomName

  这句话的意思就是之前标记的 /webSocket/ChatRoom/{roomName} 里的 roomName 的值

  String msg

  这个参数就是前台发送的消息。 Session session 这个参数在代码中说明了就不重复解释

  在接收到消息之后就调用这个这个函数内的一个完美自定义的方法 broadcast()

  public static void broadcast(String roomName, String msg) throws Exception {

  for (Session session : rooms.get(roomName)) {

  session.getAsyncRemote().sendText(msg);

  }

  }

  这个方法调用了 session 对象里的 getAsyncRemote() 方法的 sendText(msg)

  用来向之前封装的所有对象( rooms )广播消息

  webSocket.onmessage = function (evt) {

  var Data = JSON.parse(evt.data)

  };

  接收到广播消息之后,前端调用了 WebSocket对象的 onmessage 方法

  这里的 evt 参数就是广播的消息 但是后端传过来的是一个对象

  我们要调用这个对象的 evt.data 方法 如果是Json数据 就把它转换成我们js能识别的对象

  到这里为止来就完成了消息的交流。

  要断开请求的话,就调用 webSocket.close() 方法 ,这个时候

  后台就会自动调用 下面这个方法

  @OnClose

  public void disConnect(@PathParam("roomName") String roomName, Session session) {

  System.out.println("断开连接!");

  }

  同时响应到前端 ,调用下面这个方法

  webSocket.onclose = function () {

  console.log("和服务器的握手连接已关闭...(分手)")

  webSocket = null;

  };

  到这里来位置完成了WebSocket 完整的双向通信。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI