socketio单聊，群聊
一个简单的聊天程序，功能有单聊，群聊
页面如下所示：
Name后面跟的是当前登录人的名字，下方的列表是当前在线的用户，双击该用户名后，可以给该用户发送消息。再次双击同一用户，下方会显示给所有(All)人发消息。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Chat</title>
<link href="bootstrap.css" rel="stylesheet">
<style>
body {
padding: 20px;
}
#console {
height: 400px;
overflow: auto;
}
.username-msg {
color: orange;
}
.connect-msg {
color: green;
}
.disconnect-msg {
color: red;
}
.send-msg {
color: #888
}
</style>
<script src="js/socket.io/socket.io.js"></script>
<script src="js/moment.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
var userName = 'user' + Math.floor((Math.random() * 1000) + 1);
var socket = io.connect('http://localhost:9092');
socket.on('connect', function () {
output('<span class="connect-msg">Client has connected to the server!</span>');
addUser(userName);
var jsonObject = {
userName: userName
};
$('#myName').text(userName);
socket.emit('login', jsonObject);
});
socket.on('users', function (data) {
$("#users").empty();//先清空已有的用户，然后在添加所有的
for (var i = 0; i < data.length; i++)
addUser(data[i]);
});
socket.on('groupChatEvent', function (data) {
output('<span class="username-msg"> groupChat ' + data.userName + ':</span> ' + data.message);
});
socket.on('chatEvent', function (data) {
output('<span class="username-msg"> chat ' + data.userName + ':</span> ' + data.message);
});
socket.on('disconnect', function () {
output('<span class="disconnect-msg">The client has disconnected!</span>');
});
function sendDisconnect() {
socket.disconnect();
}
function sendMessage() {
var message = $('#msg').val();
$('#msg').val('');
var jsonObject;
var toUser = $('#user').val();
if (toUser == "All") {
jsonObject = {
userName: userName,
message: message
};
socket.emit('groupChatEvent', jsonObject);
} else {
jsonObject = {
userName: userName,
message: message,
toUser: toUser
};
socket.emit('chatEvent', jsonObject);
output('<span class="username-msg"> chat ' + data.userName + ':</span> ' + data.message);
}
}
function output(message) {
var currentTime = "<span class='time'>" + moment().format('HH:mm:ss.SSS') + "</span>";
var element = $("<div>" + currentTime + " " + message + "</div>");
$('#console').prepend(element);
}
function addUser(userName) {
var element = $("<div ondblclick='singleChat(this)'>" + userName + "</div>");
$('#users').prepend(element);
}
function singleChat(div) {
if($('#user').val()==div.innerText){
$('#user').val("All").show();
}else{
$('#user').val(div.innerText).show();
}
}
</script>
</head>
<h1>Chat</h1>
Name:<span id="myName"></span>
<br/>
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<div id="users">
<div>test</div>
</div>
</div>
<div class="span10">
<div id="console" class="well">
</div>
<form class="well form-inline" onsubmit="return false;">
<input id="user" class="input-mini disabled" type="text" style="display: none" disabled>
<input id="msg" class="input-xlarge" type="text" placeholder="Type something..."/>
<button type="button" onClick="sendMessage()" class="btn">Send</button>
<button type="button" onClick="sendDisconnect()" class="btn">Disconnect</button>
</form>
</div>
</div>
</div>
</body>
</html>
package com.corundumstudio.socketio.demo;
import com.corundumstudio.socketio.AckRequest;
import com.corundumstudio.socketio.Configuration;
import com.corundumstudio.socketio.SocketIOClient;
import com.corundumstudio.socketio.SocketIOServer;
import com.corundumstudio.socketio.listener.DataListener;
import com.corundumstudio.socketio.listener.DisconnectListener;
import com.google.common.collect.BiMap;
import com.google.common.collect.HashBiMap;
import java.util.ArrayList;
public class ChatLauncher {
private static BiMap<String,SocketIOClient> users = HashBiMap.create();
private static ArrayList<String> userLists = new ArrayList<String>();
public static void main(String[] args) throws InterruptedException {
Configuration config = new Configuration();
config.setHostname("localhost");
config.setPort(9092);
final SocketIOServer server = new SocketIOServer(config);
server.addEventListener("groupChatEvent", ChatObject.class, new DataListener<ChatObject>() {
@Override
public void onData(SocketIOClient client, ChatObject data, AckRequest ackRequest) {
// broadcast messages to all clients
server.getBroadcastOperations().sendEvent("groupChatEvent", data);
}
});
server.addEventListener("chatEvent", ChatObject.class, new DataListener<ChatObject>() {
@Override
public void onData(SocketIOClient socketIOClient, ChatObject chatObject, AckRequest ackRequest){
System.out.println(chatObject);
SocketIOClient fromSocketIoClient = users.get(chatObject.getUserName());
SocketIOClient toSocketIoClient = users.get(chatObject.getToUser());
if(toSocketIoClient!=null){
toSocketIoClient.sendEvent("chatEvent",chatObject);
}
if(fromSocketIoClient!=null){
fromSocketIoClient.sendEvent("chatEvent",chatObject);
}
}
});
server.addEventListener("login", ChatObject.class, new DataListener<ChatObject>() {
@Override
public void onData(SocketIOClient socketIOClient, ChatObject chatObject, AckRequest ackRequest) {
users.put(chatObject.getUserName(),socketIOClient);
userLists.add(chatObject.getUserName());
server.getBroadcastOperations().sendEvent("users",userLists);
}
});
server.addDisconnectListener(new DisconnectListener() {
@Override
public void onDisconnect(SocketIOClient socketIOClient) {
String userName = users.inverse().get(socketIOClient);
userLists.remove(userName);
users.remove(userName);
server.getBroadcastOperations().sendEvent("users", userLists);
}
});
server.start();
Thread.sleep(Integer.MAX_VALUE);
server.stop();
}
}