NettySocketIO实现js前台与Java后台的通讯交互(NettySocketIO源码实现即时聊天)
包含内容: 源码,全套工具
作者QQ1420527913
下载Demo
项目对应的实例代码可以通过【点击下载】获得, 相应的后台jar包，前台socket.io.js 在工具下载中获得
项目开发工具Eclipse, JDK1.7, Maven
项目结构图
1. 服务端源码, 在控制台下启动DemoSocketServer.java即可
2. 使用浏览器访问目录client下的index.html即可连接到后台，进行消息的发送
3. 项目为maven项目, NettySocketIO对应的jar包配置信息皆包含在pom.xml中
本实例使用NettySocketIO实现类似聊天室的功能, 用户A打开网页后，可以在界面上发送一条信息, B打开网页后, 也可以在界面上发送一条信息, 后台实现了消息的群发功能，即A发送消息后，B可以接收相应的消息，B发送消息后，A也能接收消息
见下图，张三与李四通过html页面实现即时聊天功能，基于NettySocketIO此实例，可以开发出在线客服功能
1. Java后台的代码实现
NettySocketIO使用的通讯框架为Netty, 所以必须引入Netty的jar包; 同时NettySocketIO也有自己相应的jar包为
netty-socketio.jar
SocketIOServer使用本地ip,绑定端口9999,在9999是进行监听,
有客户端连接后，addConnectListener被调用；
客户端断连后,addDisconnectListener会被调用；
客户端发送chatevent事件后，CharteventListener会被调用，同时chatevent事件对应的消息内容会被转换为ChatObject
注意一下: NettySocketIO前后台交互的数据格式为JSON
public class DemoSocketServer {
public static void main(String[] args) throws InterruptedException {
Configuration config = new Configuration();
config.setHostname("localhost");
config.setPort(9999);
SocketIOServer server = new SocketIOServer(config);
//连接
server.addConnectListener(new ConnectListener() {
@Override
public void onConnect(SocketIOClient client) {
System.out.println("客户端连接成功!");
}
});
//断连
server.addDisconnectListener(new DisconnectListener() {
@Override
public void onDisconnect(SocketIOClient arg0) {
// TODO Auto-generated method stub
arg0.sendEvent("chatevent", "断开前的最后一次通话"); //断开事件中不能发送信息
System.out.println("客户端断开!");
}
});
//发送聊天消息
CharteventListener listner = new CharteventListener();
listner.setServer(server);
server.addEventListener("chatevent", ChatObject.class, listner);
/**************************************************************
可以添加其它监听消息
**************************************************************/
//启动服务
server.start();
Thread.sleep(Integer.MAX_VALUE);
server.stop();
}
}public class ChatObject {
private String userName;
private String message;
public ChatObject() {
}
public ChatObject(String userName, String message) {
super();
this.userName = userName;
this.message = message;
}
public String getUserName() {
return userName;
}
public void setUserName(String userName) {
this.userName = userName;
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
}public class CharteventListener implements DataListener<ChatObject>{
SocketIOServer server;
public void setServer(SocketIOServer server) {
this.server = server;
}
public void onData(SocketIOClient client, ChatObject data, AckRequest ackSender) throws Exception {
System.out.println("ThreadName:" + Thread.currentThread().getName());
//chatevent为 事件的名称，data为发送的内容
this.server.getBroadcastOperations().sendEvent("chatevent", data); //群发
//client.sendEvent("chatevent", data); //单个发送
}
}2. html+js前台
前台必须引入socket.io.js, 这是NettySocketIO所需要的js前台库；
html中使用了Jquery技术，对应的jquery.js也需要引用;
var socket = io.connect('http://localhost:9999'); ----连接后台服务并返回socket对象
socket.emit('chatevent', {userName: userName, message: message}); ----向后台发送chatevent事件并传递数据
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>NettySocket客户端</title>
<script type="text/javascript" src="jquery.min.js" ></script>
<script type="text/javascript" src="socket.io.js"></script>
<style>
body {
padding:20px;
}
#console {
height: 300px;
overflow: auto;
}
.username-msg {color:orange;}
.connect-msg {color:green;}
.disconnect-msg {color:red;}
.send-msg {color:#888}
</style>
</head>
<body>
<h1>Netty-socketio示例</h1>
<br/>
<div id="console" class="well">
</div>
<form class="well form-inline" onsubmit="return false;">
用户:<input id="name" class="input-xlarge" type="text" placeholder="用户名称..."/>
内容:<input id="msg" class="input-xlarge" type="text" placeholder="发送内容..."/>
<button type="button" onClick="sendMessage()" class="btn">Send</button>
<button type="button" onClick="sendDisconnect()" class="btn">Disconnect</button>
</form>
</body>
<script type="text/javascript">
var socket = io.connect('http://localhost:9999');
socket.on('connect', function() {
output('<span class="connect-msg">成功连接到服务端!</span>');
});
socket.on('chatevent', function(data) {
output('<span class="username-msg">' + 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 userName = $("#name").val()
var message = $('#msg').val();
$('#msg').val('');
socket.emit('chatevent', {userName: userName, message: message});
}
function output(message) {
var time = '';
var oDate = new Date(); //实例一个时间对象；
time += oDate.getFullYear() + '-'; //获取系统的年；
time += (oDate.getMonth()+1) + '-'; //获取系统月份，由于月份是从0开始计算，所以要加1
time += oDate.getDate() + ' '; // 获取系统日，
time += oDate.getHours() + ':'; //获取系统时，
time += oDate.getMinutes() + ':'; //分
time += oDate.getSeconds(); //秒
var currentTime = "<span class='time'>" + time + "</span>";
var element = $("<div>" + currentTime + " " + message + "</div>");
$('#console').prepend(element);
}
</script>
</html>