使用websocket简单实现多人聊天

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_36414969/article/details/88698294

前言

这是课堂作业,在网上找到了源码(感谢嘚佬们分享),自己看懂了后打了一遍,并根据自己的需要改了一些,写这篇博客希望记录自己对websocket的理解,也希望看见的各位交流。

websocket可以简单的与Javase的socket比作一个东西,不过websocket适用于浏览器与服务器的交互。它与http的区别是,http不是一个持久性的连接,而websocket是一个持久的连接,它是基于http协议的。具体可以参考三篇博客。

1.关于http。2.关于websocket。3.http与websocket

首先是后端代码,这里的@onOpen等注解是必要的,应该会与对应的事件绑定,开始我不知道是不是必要所以第一次故意把注解去掉了,结果报错了。 

package websocket.ht.com;

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

import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;

@ServerEndpoint("/server")//通过/server就可以注册这个mysocket了
public class MySocket {
	
	private static int onlineCount=0;
	
	private static CopyOnWriteArraySet<MySocket> socketSet=new CopyOnWriteArraySet<MySocket>();
	
	private Session session;
	
	private String name;
	@OnOpen//连接成功
	public void onOpen(Session session) {
		this.session=session;
		socketSet.add(this);
		addOnlineCount();  //这里可以用变量++替代,但是哪个更好呢?
		this.name="用户"+onlineCount;//为用户加个名字
		try {
			this.sendMessage("欢迎您!你是"+this.name+",开始聊天吧!");
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		System.out.println("有新连接加入!当前在线人数为"+onlineCount);//这里通用若用函数替代,哪个更好呢?getcount()
		
	}
	
	@OnClose//关闭
	public void onClose() {
		onlineCount-=1;
		socketSet.remove(this);
		System.out.println("一个用户离开了!当前在线人数"+onlineCount);//同上
	}
	
	@OnError//连接出错
	public void onError(Session session,Throwable error) {
		System.out.println("连接发生错误");
		error.printStackTrace();
	}
	
	@OnMessage//当客户端有消息传来时
	public void onMessage(String message,Session session) {
		System.out.println("来自客户端的消息,由"+this.name+"发出:"+message);
		String mstemp;
		for (MySocket mySocket : socketSet) {
			if(this.name.equals(mySocket.name)) { //处理客户端消息
				mstemp="我"+":"+message;
			}else {
				mstemp=this.name+":"+message;
			}
			try {
				mySocket.sendMessage(mstemp);
			} catch (IOException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
				continue;
			}
		}
	}
	
	
	public void sendMessage(String message) throws IOException {
		this.session.getBasicRemote().sendText(message);
		
	}
	
	//串行化,防止并发时数据出错。
	public static synchronized void addOnlineCount() {
		onlineCount++;
	}
	
	public static synchronized void subOnlineCount() {
		onlineCount--;
	}
	
	//个人觉得这个函数不用
	public static synchronized int getOnlineCount() {
		return onlineCount;
	}
}

下面是html文件,当然不一定非得HTML文件,jsp这些也是可以的,支持js就好。 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多人在线聊天</title>
</head>
<body>
发送一句吧:<input id="text" type="text">
<button onclick="send()">发送消息</button>
<button onclick="closeWebSocket()">退出多人聊天</button>
<hr>
<div id="message"></div>
================================================================
<script type="text/javascript">
	var websocket=null
	if('WebSocket' in window){
		websocket=new WebSocket("ws://localhost:8080/websocket/server");
	}
	else{
		alert('当前浏览器不支持websocket')
	}
	
	//这个websocket不完全相同,打一次代码理解的
	
	//连接失败事件
	websocket.onerror=function(){
		setMessageInnerHTML("呀!连接聊天室失败!");
	}
	
	//连接成功事件
	websocket.onopen=function(){
		setMessageInnerHTML("成功加入聊天室");
	}
	
	
	//有消息从服务器端发送过来
	websocket.onmessage=function (event){
		setMessageInnerHTML(event.data);
	}
	
	//关闭事件
	websocket.onclose=function(){
		setMessageInnerHTML('退出聊天室!')
	}
	
	
	window.onbeforeunload=function(){//关闭窗口时,关闭连接
		closeWebsocket();
	}
	
	
	function setMessageInnerHTML(innerHTML){
		document.getElementById("message").innerHTML+=innerHTML+'<br/>'
	}
	
	function closeWebSocket(){
		websocket.close();
	}
	
	function send(){
		var message=document.getElementById('text').value;
		websocket.send(message);
	}
</script>
</body>
</html>

个人认为需要注意一个地方,前端的websocket与后端的socket并不是同一个,如前端的websocket.onopen应该看做一个事件或变量,当连接成功时它被设置为True,而后端的onopen()是函数,它应该是先于前端的onopen被执行的。 

运行界面:

 

 

展开阅读全文

没有更多推荐了,返回首页