基于websocket的多人实时聊天效果问题

qq_28815359 2015-06-25 08:14:16

这是html页面



<!DOCTYPE html>

<html>

<head>

	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />

	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

	<title> 使用WebSocket通信 </title>

	<script type="text/javascript">

		// 创建WebSocket对象

		var webSocket = new WebSocket("ws://127.0.0.1:8888/WebSocket/chat");

		var sendMsg = function()

		{

			var inputElement = document.getElementById('msg');

			// 发送消息

			webSocket.send(inputElement.value);

			// 清空单行文本框

			inputElement.value = "";

		}

		var send = function(event)

		{

			if (event.keyCode == 13)

			{

				sendMsg();

			}

		};

		webSocket.onopen = function()

		{

			// 为onmessage事件绑定监听器，接收消息

			webSocket.onmessage= function(event)

			{

				var show = document.getElementById('show')

				// 接收、并显示消息

				show.innerHTML += event.data + "<br/>";

				show.scrollTop = show.scrollHeight;

			}

			document.getElementById('msg').onkeydown = send;

			document.getElementById('sendBn').onclick = sendMsg;

		};

		webSocket.onclose = function ()

		{

			document.getElementById('msg').onkeydown = null;

			document.getElementById('sendBn').onclick = null;

			Console.log('WebSocket已经被关闭。');

		};

	</script>

</head>

<body>

<div style="width:600px;height:240px;

	overflow-y:auto;border:1px solid #333;" id="show"></div>

<input type="text" size="80" id="msg" name="msg" placeholder="输入聊天内容"/>

<input type="button" value="发送" id="sendBn" name="sendBn"/>

</body>

</html>

这是服务器程序



import java.io.IOException;

import java.util.Set;

import java.util.concurrent.CopyOnWriteArraySet;

import java.util.concurrent.atomic.AtomicInteger;



import javax.websocket.*;

import javax.websocket.server.*;



@ServerEndpoint("/2.14test/chat")

public class ChatEntpoint {

	private static final String GUEST_PREFIX = "访客";

	private static final AtomicInteger connectionIds = new AtomicInteger();

	private static final Set<ChatEntpoint> clientset = new CopyOnWriteArraySet<>();

	private final String nickname;

	private Session session;



	public ChatEntpoint() {

		nickname = GUEST_PREFIX + connectionIds.getAndIncrement();

	}



	// 当客户端连接进来时自动激发该方法

	@OnOpen

	public void start(Session session) {

		this.session = session;

		// 将WebSocket客户端会话添加到集合中

		clientset.add(this);

		String message = String.format("[%s %s]", nickname, "加入了聊天室");

		// 发送消息

		broadcast(message);

	}



	@OnClose

	public void end() {

		clientset.remove(this);

		String message = String.format("[%s %s]", nickname, "離開了聊天室");

		broadcast(message);

	}



	@OnMessage

	public void incoming(String message) {

		String filteredMessage = String.format("%s:%s", nickname,

				filter(message));

		// 发送消息

		broadcast(filteredMessage);

	}



	@OnError

	public void onError(Throwable t) throws Throwable {

		System.out.println("WebSocket服务断错误");

	}



	private static void broadcast(String msg) {

		for (ChatEntpoint client : clientset) {

			try{

				synchronized(client){

					//发送消息

					client.session.getBasicRemote().sendText(msg);

				}

				

			}

			catch(Exception e){

				System.out.print("聊天错误，像客户端"+client+"发送消息出现错误。");

				clientset.remove(client);

				try{

					client.session.close();

				}

				catch(Exception e1){

					e1.printStackTrace();

				}

				String message=String.format("[%s %s]", client.nickname,"已断开了连接");

				

				

			}

		}

	}

	private static String filter(String message){

		if(message==null)

		return null ;

		char content[]=new char[message.length()];

		message.getChars(0, message.length(), content,0);

		StringBuilder result=new StringBuilder(content.length+50);

		for(int i=0;i<content.length;i++)

		{

			//控制对尖括号等特殊字符进行转义

			switch(content[i]){

			case '<':

			result.append("<");

			break;

			case '>':

				result.append(">");

				break;

			case '&':

				result.append("&");

				break;

			case '"':

				result.append(""");

				break;

			default:

				result.append(content[i]);

			}

			

		}

		return (result.toString());

		

	}

}