Web开发中使用WebSocket实现多人在线聊天

最新推荐文章于 2024-07-26 09:30:00 发布

sLoki

最新推荐文章于 2024-07-26 09:30:00 发布

阅读量1.5k

点赞数

文章标签： web websocket

本文链接：https://blog.csdn.net/sLoki/article/details/103644058

版权

Web开发中使用WebSocket实现多人在线聊天

Demo:在线聊天室

Demo:在线聊天室

刚刚接触到了一个web开发中比较有用的一个技术——websocket技术。

实现前端页面的数据进行实时刷新，以前往往会用到轮询，就是通过每隔一段时间就发送一次请求给服务器，服务器再根据数据的更新情况做出响应，当然了，过多的请求也会是服务器造成太大的负荷。而现在有了websocket技术，就不用担心这种情况了。下面就通过一个小小的demo来展示一下websocket的应用吧。

前端JSP:

定义一个输入框和一个按钮；当按钮点击是，触发ws.send方法，向服务器发送消息。

<script>
$(document).ready(function WebSocketTest()
{
	var ws;
   if ("WebSocket" in window)
   {
      alert("您的浏览器支持 WebSocket!");
      
      // 打开一个 web socket，项目名后的websocket为你在servlet中加的注解
      ws = new WebSocket("ws://localhost:8080/项目名/websocket");
       
      ws.onopen = function()
      { 
         alert("连接已打开...");
      };
      
      ws.onmessage = function (evt) 
      { 
      	//收到服务器发来的消息时
         var received_msg = evt.data;
         $("#show").append("<p>"+received_msg+"</p>");
      };
      
      ws.onclose = function()
      { 
         // 关闭 websocket
         alert("连接已关闭..."); 
      };
       
   }
   
   else
   {
      // 浏览器不支持 WebSocket
      alert("您的浏览器不支持 WebSocket!");
   }
   //点击发送按钮时触发
   $("#sendMsg").click(function(){
	   var Msg=$("#Msg").val();
	   ws.send(Msg);
	   $("#Msg").text("");
   });
});
  </script>
</head>
<body>
<div id="show">

</div>
<table>
<tr>
<td><input type="text" id="Msg" class='form-control'></td>
<td><button id="sendMsg" type="button" class="btn btn-info">发送</button></td>
</tr>
</table>

</body>

后台servlet:

为每个连接到websocket分配一个Session（这个session不是Httpsession，相当于用户的唯一标识，用它进行与指定用户通讯），onMessage接收用户发来的信息，而后sendMessage用来为每一个用户发送信息，从而实现多人在线聊天。

@WebServlet("/WebSocket")
@ServerEndpoint(value = "/websocket")  //该注解为JSP页面时用到的websocket
public class WebSocket extends HttpServlet {
	private static final long serialVersionUID = 1L;
	 //concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。若要实现服务端与单一用户通信的话，可以使用Map来存放，其中Key可以为用户标识
    private static CopyOnWriteArraySet<WebSocket> webSocketSet = new CopyOnWriteArraySet<WebSocket>();
    //这个session不是Httpsession，相当于用户的唯一标识，用它进行与指定用户通讯
    private  javax.websocket.Session session=null;

	
    public WebSocket() {
        super();
        // TODO Auto-generated constructor stub
    }

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		 	//客户端无请求，这里无需响应
}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}
	//客户端连接上websocket的操作
	@OnOpen
    public void onOpen(Session session){
        System.out.println("Session " + session.getId() + " has opened a connection");
        this.session=session;
		webSocketSet.add(this);     //加入set中
    }
    //接收客户端发来的信息，并将该消息发送给各个用户
	@OnMessage
    public void onMessage(String message, Session session){
        String publicMsg="Message from " + session.getId() + ": " + message;
        System.out.println(publicMsg);
        try {
			sendMessage(publicMsg);
		} catch (IOException e) {
			// TODO 自动生成的 catch 块
			e.printStackTrace();
		}
    }
    //关闭websocket连接
	@OnClose
    public void onClose(Session session){
        webSocketSet.remove(this);  //从set中删除
        System.out.println("Session " +session.getId()+" has closed!");
    }
    //发生错误是的操作
	@OnError
    public void onError(Session session, Throwable t) {
        t.printStackTrace();
    }
    //自定义的sendMessage方法，用来向多个客户端发送信息
	 public void sendMessage(String msg) throws IOException{
	        //群发消息
	        for(WebSocket item: webSocketSet){
	            try {
	                item.session.getBasicRemote().sendText(msg);
	            } catch (IOException e) {
	                e.printStackTrace();
	                continue;
	            }
	        }

	    }
}

效果展示:

打开三个URL，即可模拟多人聊天
在这里插入图片描述

sLoki

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
2
评论
Web开发中使用WebSocket实现多人在线聊天

Web开发中使用WebSocket实现多人在线聊天Demo:在线聊天室刚刚接触到了一个web开发中比较有用的一个技术——websocket技术。前端JSP:后台servlet:效果展示:Demo:在线聊天室刚刚接触到了一个web开发中比较有用的一个技术——websocket技术。实现前端页面的数据进行实时刷新，以前往往会用到轮询，就是通过每隔一段时间就发送一次请求给服务器，服务器再根据数据的...
复制链接

扫一扫