使用WebSocket开发聊天室

最新推荐文章于 2021-11-19 13:29:19 发布

虚心若愚求知若渴

最新推荐文章于 2021-11-19 13:29:19 发布

阅读量185

点赞数

分类专栏： Java 文章标签： websocket

本文链接：https://blog.csdn.net/weixin_39806100/article/details/102993018

版权

Java 专栏收录该内容

68 篇文章 1 订阅

订阅专栏

1，什么是websocket

websocket是一种传输网络协议，它相对于http协议，客户端和服务器只需要建立一次连接（专业名称称之握手），客户端和服务器就可以相互通信，（也就是服务器可以主动向客户端发送消息），而我们以前一直用的http协议，是只能客户端发送请求给服务器，服务器才能响应客户端数据。

http协议

在这里插入图片描述

WebSocket协议

在这里插入图片描述

2，websocket的使用场景

用于在线客户，社交聊天，视频弹幕，位置服务，在线教育，股票基金实时报价和体育实况实时更新等等高实时场景。

3，使用websocket实现聊天室。

①实现原理图

在这里插入图片描述

②编写服务器端代码

package server;

import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;

import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;

//声明websocket的名字为chat
@ServerEndpoint("/chat")
/**
 * WebSocket服务器端
 */
public class ChatServer {
	
	//Session对象
	private Session session;
	
	//初始化集合，用来存放每个客户端对应的服务器端的WebSocket对象，线程安全
	private static CopyOnWriteArraySet<ChatServer> servers = new CopyOnWriteArraySet<ChatServer>();
	
	/**
	 * 当客户端连接成功后调用的方法
	 * @param session
	 */
	@OnOpen
	public void onOpen(Session session) {
		this.session=session;
		servers.add(this);
		System.out.println("连接已经建立："+session.getId());
	}
	
	/**
	 * 接收客户端发送的消息
	 * @param msg
	 */
	@OnMessage
	public void onMessage(String msg) {
		System.out.println("客户端发送的数据："+msg);
		try {
			//向客户端发送数据
			//this.session.getBasicRemote().sendText(msg);
			for (ChatServer chatServer : servers) {
				//向客户端发送数据
				chatServer.session.getBasicRemote().sendText(msg);
			}
			
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}
	
	/**
	 * 发生错误时调用的方法
	 * @param error
	 */
	@OnError
	public void onError(Throwable error) {
		System.out.println("发生错误");
		error.printStackTrace();
	}
	
	/**
	 * 关闭连接调用的方法
	 */
	@OnClose
	public void onClose() {
		servers.remove(this);
		System.out.println("连接关闭");
	}
}

③客户端代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>websocket聊天室demo</title>
	</head>
	<body>
	
		<div id="main">
			<div id="message">
			
			</div>
			<div id="inputArea">
				昵称：<input id="nick"/>
				内容：<input id="content"/>
				<input type="button" id="send" value="发送"/>
			</div>
		</div>
		
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<script>
			//声明WebSocket对象
			var ws = null;
			if(WebSocket){
				//建立连接
				ws = new WebSocket("ws://localhost:8080/chatroom/chat");
			}else{
				alert("浏览器不支持WebSocket!");
			}
			
			//与服务器建立连接后执行的方法
			ws.onopen = function(){
				//向服务器端发送消息
				ws.send("欢迎新人加入聊天室");
			}
			
			//接收服务器端发送的数据后执行的方法
			ws.onmessage=function(event){
				//显示接收数据
				showMessage(event.data);
			}
			
			//将消息显示到页面中
			function showMessage(msg){
				var html=$("#message").html();
				html=html+"<p>"+msg+"</p>";
				$("#message").html(html);
			}
			
			//发送按钮单击事件
			$("#send").click(function(){
				var nick =  $("#nick").val();
				var content=$("#content").val();
				if(nick=="" || content == ""){
					alter("请输入昵称或内容");
					return;
				}
				ws.send(nick+"：<br/>"+content);
			});
		</script>
	</body>
</html>

虚心若愚求知若渴

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用WebSocket开发聊天室

资料参考：腾讯课堂：基于Java的WebSocket聊天室实现https://ke.qq.com/course/284915用WebSocket实现的非常优秀的在线聊天网站案例http://www.blue-zero.com/chat/1，什么是websocketwebsocket是一种传输网络协议，它相对于http协议，客户端和服务器只需要建立一次连接（专业名称称之握手），客户端和服务器...
复制链接

扫一扫

专栏目录