WebSocket + html 实现聊天室

WebSocket + html 实现聊天室

现很多网站为了实现即时通讯,所用的技术都是轮询(polling)。轮询是在特定的的时间间隔(如每1秒),由浏览器对服务器发出HTTP request,然后由服务器返回最新的数据给客户端的浏览器。这种传统的HTTP request 的模式带来很明显的缺点 – 浏览器需要不断的向服务器发出请求,然而HTTP request 的header是非常长的,里面包含的有用数据可能只是一个很小的值,这样会占用很多的带宽。
而比较新的技术去做轮询的效果是Comet – 用了AJAX。但这种技术虽然可达到全双工通信,但依然需要发出请求。
在 WebSocket API,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。在此WebSocket 协议中,为我们实现即时服务带来了两大好处:

  1. Header
    互相沟通的Header是很小的-大概只有 2 Bytes
  2. Server Push
    服务器的推送,服务器不再被动的接收到浏览器的request之后才返回数据,而是在有新数据时就主动推送给浏览器。
    注意
    WebSocket支持tomcat7,jdk1.7及其以上版本。
    聊天室原理:
    多个客户端和服务端进行握手,客户端将信息发送给服务端,有服务端通过广播的形式发送给大家。
    聊天室效果图
    这里写图片描述
    目录
    这里写图片描述
    主要代码
    ChatSocket.java
package com.xzy.socket;

import java.io.IOException;
import java.util.ArrayList;
import java.util.Date;
import java.util.HashSet;
import java.util.Iterator;
import java.util.List;
import java.util.Set;

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

import com.google.gson.Gson;
import com.xzy.vo.Message;

@ServerEndpoint("/chatSocket")
public class ChatSocket {
	//存储当前socket对象
	private static Set<ChatSocket> sockets = new HashSet<ChatSocket>();
	//用户名
	private static List<String> names = new ArrayList<String>();
	private Session session;
	private String username;
	private Gson gson = new Gson();

	// 进入
	@OnOpen
	public void open(Session session) {
		this.session = session;
		sockets.add(this);
		String queryString = session.getQueryString();
		this.username = queryString.substring(queryString.indexOf("=") + 1);
		names.add(this.username);

		Message message = new Message();
		message.setAlert(this.username + "进入聊天室!!");
		message.setNames(names);
		broadcast(sockets, gson.toJson(message));
	}
	//退出
	@OnClose
	public void close(Session session) {
		sockets.remove(this);
		names.remove(this.username);

		Message message = new Message();
		message.setAlert(this.username + "退出聊天室!!");
		message.setNames(names);

		broadcast(sockets, gson.toJson(message));
	}
	//发送
	@OnMessage
	public  void receive(Session  session,String msg ){
		
		Message  message=new Message();
		message.setSendMsg(msg);
		message.setFrom(this.username);
		message.setDate(new Date().toLocaleString());
		
		broadcast(sockets, gson.toJson(message));
	}
		
	public void broadcast(Set<ChatSocket> ss, String msg) {

		for (Iterator iterator = ss.iterator(); iterator.hasNext();) {
			ChatSocket chatSocket = (ChatSocket) iterator.next();
			try {
				chatSocket.session.getBasicRemote().sendText(msg);
			} catch (IOException e) {
				e.printStackTrace();
			}
		}
	}
}

chat.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	var ws;
	var username = getUrlParameter('username');
	var url = "ws://localhost:8080/websocket/chatSocket?username="
			+ username;
	window.onload = connect;
	function connect() {
		if ('WebSocket' in window) {
			ws = new WebSocket(url);
		} else if ('MozWebSocket' in window) {
			ws = new MozWebSocket(url);
		} else {
			alert('该浏览器不支持websocket');
			return;
		}

		ws.onmessage = function(event) {
			eval("var result=" + event.data);
			//欢迎语言
			if (result.alert != undefined) {
				document.getElementById("content").innerHTML += result.alert
						+ "<br/>";
			}
			//列表
			if (result.names != undefined) {
				document.getElementById("userList").innerHTML = "";
				var arr = result.names;
				for (var i = 0; i < arr.length; i++) {
					document.getElementById("userList").innerHTML += arr[i]
							+ "<br/>";
				}
			}
			//聊天内容
			if (result.from != undefined) {
				document.getElementById("content").innerHTML += result.from
						+ " " + result.date + " 说:<br/>" + result.sendMsg
						+ "<br/>";
			}
		};
	}

	function wsSend() {

		var msg = document.getElementById("msg");
		ws.send(msg.value);
		msg.value = "";
	}

	//截取URL 中的传过来的值
	function getUrlParameter(name) {
		name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
		var regexS = "[\\?&]" + name + "=([^&#]*)";
		var regex = new RegExp(regexS);
		var results = regex.exec(window.parent.location.href);
		if (results == null)
			return "";
		else {

			return results[1];
		}
	}
</script>
</head>
<body>
	<div id="content"
		style="border: 1px solid black; width: 400px; height: 300px; float: left;"></div>
	<div id="userList"
		style="border: 1px solid black; width: 100px; height: 300px; float: left;"></div>

	<div style="clear: both;">
		<input id="msg" />
		<button onclick="wsSend()">send</button>
	</div>
</body>
</html>

源码下载:CSDN下载 百度云下载 提取码:x6l4
连接失效联系楼主

评论 19
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值