netty-socket.io点对点通讯和聊天室通讯
netty-socketio是基于netty的socket.io服务实现，可以无缝对接前端使用的socketio-client.js。
相对于javaee的原生websocket支持（@serverEndpoint）和spring-boot的MessageBroker(@messageMapping)，netty-socketio绝对是最好用的websocket后台实现。因为netty-socketio完整的实现了socket.io提供的监听前台事件、向指定客户端发送事件、将指定客户端加入指定房间、向指定房间广播事件、客户端从指定房间退出等操作。
msg实体
package com.song.netty;
import java.io.Serializable;
public class Msg implements Serializable{
private static final long serialVersionUID = -6519304261259719883L;
private String userId;
private String userName;
private String receiveUserId;
private String content;
public String getUserId() {
return userId;
}
public void setUserId(String userId) {
this.userId = userId;
}
public String getUserName() {
return userName;
}
public void setUserName(String userName) {
this.userName = userName;
}
public String getReceiveUserId() {
return receiveUserId;
}
public void setReceiveUserId(String receiveUserId) {
this.receiveUserId = receiveUserId;
}
public String getContent() {
return content;
}
public void setContent(String content) {
this.content = content;
}
public Msg(String userId, String userName, String receiveUserId, String content) {
super();
this.userId = userId;
this.userName = userName;
this.receiveUserId = receiveUserId;
this.content = content;
}
public Msg() {
super();
}
}
聊天室通讯服务端可与多个客户端通讯
测试方法，在不同浏览器各打开一个聊天室页面，发送消息，全部都会接收到
监听聊天室通讯事件
package com.song.netty; import com.corundumstudio.socketio.AckRequest;
import com.corundumstudio.socketio.SocketIOClient;
import com.corundumstudio.socketio.SocketIOServer;
import com.corundumstudio.socketio.listener.DataListener; public class OneToManyChartListener implements DataListener<Msg>{ SocketIOServer server; public void setServer(SocketIOServer server) {
this.server = server;
} public void onData(SocketIOClient socketIoClient, Msg msg, AckRequest askSender) throws Exception {
System.out.println("一对多"+socketIoClient.getSessionId());
// chatevent为 事件的名称， data为发送的内容
this.server.getBroadcastOperations().sendEvent("chatMany", msg);
}
}
点对点通讯客户端只与服务端通讯
测试方法，在不同浏览器各打开一个聊天室页面，发送消息，只有发送消息的那个客服端才能接收到消息
监听点对点通讯事件
package com.song.netty; import com.corundumstudio.socketio.AckRequest;
import com.corundumstudio.socketio.SocketIOClient;
import com.corundumstudio.socketio.SocketIOServer;
import com.corundumstudio.socketio.listener.DataListener; public class OneToOneChartListener implements DataListener<Msg>{ SocketIOServer server; public void setServer(SocketIOServer server) {
this.server = server;
} public void onData(SocketIOClient socketIoClient, Msg msg, AckRequest askSender) throws Exception {
System.out.println("一对一"+socketIoClient.getSessionId());
// chatevent为 事件的名称， data为发送的内容
this.server.getClient(socketIoClient.getSessionId()).sendEvent("chatOne", msg);
}
}
客户端使用socket.io，首先启动server，推送消息时服务端获取客户端，向客户端发送消息。客户端接收消息后刷新页面数据。
package com.song.netty; import com.corundumstudio.socketio.Configuration;
import com.corundumstudio.socketio.SocketIOServer; public class MsgServer {
public static void main(String[] args) throws InterruptedException {
Configuration config = new Configuration();
config.setHostname("localhost");
config.setPort(8888);
SocketIOServer server = new SocketIOServer(config);
OneToOneChartListener listner = new OneToOneChartListener();
listner.setServer(server);
OneToManyChartListener listnerMany = new OneToManyChartListener();
listnerMany.setServer(server);
// chatOne,chatMany为事件名称
server.addEventListener("chatOne", Msg.class, listner);
server.addEventListener("chatMany", Msg.class, listnerMany);
//启动服务
server.start();
Thread.sleep(Integer.MAX_VALUE);
server.stop();
}
}
特别注意netty的版本，版本过低会导致使用socket.io通讯时跨域
<dependency>
<groupId>com.corundumstudio.socketio</groupId>
<artifactId>netty-socketio</artifactId>
<version>1.7.14</version>
</dependency>
跨域错误如下
XMLHttpRequest cannot load http://myserver/socket.io/1/?t=1400445162388. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'myclient.com' is therefore not allowed access.
前台测试页面代码一对一
<!DOCTYPE html>
<html>
<head>
<meta charset="GB2312">
<title>聊天室</title><base>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript" src="socket.io.js"></script>
<script src="ckeditor/ckeditor.js"></script>
<style>
body {
padding: 20px;
}
#console {
height: 450px;
overflow: auto;
}
.username-msg {
color: orange;
}
.connect-msg {
color: green;
}
.disconnect-msg {
color: red;
}
.send-msg {
color: #888
}
</style>
</head>
<body>
<h1>聊天室</h1>
<!-- <br /> -->
<div id="console" class="well"></div>
<form class="well form-inline" onsubmit="return false;">
<input id="name" class="input-xlarge" type="hidden" placeholder="用户名称. . . " />
<!-- <input id="msg" class="input-xlarge" type="text" placeholder="发送内容. . . " /> -->
<textarea id="msg" rows="10" cols="50" placeholder="发送内容. . . "></textarea>
<button type="button" onClick="sendMessage()" class="btn">发送</button>
<button type="button" onClick="sendDisconnect()" class="btn">下线</button>
<button type="button" onClick="reloadThis()" class="btn">重连</button>
</form>
</body>
<script type="text/javascript">
var editor = CKEDITOR.replace( 'msg' );
editor.on("instanceReady",function(){
/* this.document.onkeydown=function(event){
alert(0);
var e = event || window.event || arguments.callee.caller.arguments[0]; if(event.ctrlKey&&event.keyCode==13){ // enter 键
//要做的事情
paraent.sendMessage();
}
}; */
this.document.on("keydown",function(){
//console.log(window.frames[0]);
var event = window.frames[0].event;
if(event.ctrlKey&&event.keyCode==13){ // enter 键
//要做的事情
sendMessage();
}
});
}); var socket;
connect();
//var socket = io.connect('http://192.168.0.207:9092'); function connect(){
socket = io.connect('ws://127.0.0.1:9092');
$("#name").val("你的小宝贝儿"+parseInt(Math.random()*100+1, 10)); socket.on('connect',function() {
serverOutput('<span class="connect-msg">欢迎进入聊天室!</span>');
//serverOutput('<span class="disconnect-msg">'+$("#name").val()+'已上线! </span>');
socket.emit('chatOne', {
userId:1,
userName : $("#name").val(),
receiveUserId:2,
content : "已上线!"
});
}); socket.on('chatOne', function(data) {
output('<span class="username-msg">'+'<img src="data:images/head.jpg" height="64" width="64"/>' + data.userName + ' : </span>'
+ data.content);
//editor.setData("");
//editor.updateElement();
}); socket.on('disconnect',function() {
serverOutput('<span class="disconnect-msg">'+$("#name").val()+'已下线! </span>'); });
} function reloadThis(){
socket.disconnect();
connect();
console.log(socket);
} function sendDisconnect() {
socket.emit('chatOne', {
userId:1,
userName : $("#name").val(),
receiveUserId:2,
content : "已下线!"
});
socket.disconnect();
} function sendMessage() {
var userName = $("#name").val()
var message = editor.getData();
$('#msg').val('');
socket.emit('chatOne', {
userId:1,
userName : userName,
receiveUserId:2,
content : message
});
//editor.setData("");
} function output(message) {
var currentTime = "<span class='time' >" + new Date() + "</span>";
var element = $("<div>" +" " + message + "</div>");
$('#console').prepend(element);
} function serverOutput(message){
var element = $("<div>" + message + "</div>");
$('#console').prepend(element);
} document.onkeydown=function(event){
//alert(0);
var e = event || window.event || arguments.callee.caller.arguments[0]; if(event.ctrlKey&&event.keyCode==13){ // enter 键
//要做的事情
sendMessage();
}
};
</script>
</html>
聊天室页面
<!DOCTYPE html>
<html>
<head>
<meta charset="GB2312">
<title>聊天室</title><base>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript" src="socket.io.js"></script>
<script src="ckeditor/ckeditor.js"></script>
<style>
body {
padding: 20px;
}
#console {
height: 450px;
overflow: auto;
}
.username-msg {
color: orange;
}
.connect-msg {
color: green;
}
.disconnect-msg {
color: red;
}
.send-msg {
color: #888
}
</style>
</head>
<body>
<h1>聊天室</h1>
<!-- <br /> -->
<div id="console" class="well"></div>
<form class="well form-inline" onsubmit="return false;">
<input id="name" class="input-xlarge" type="hidden" placeholder="用户名称. . . " />
<!-- <input id="msg" class="input-xlarge" type="text" placeholder="发送内容. . . " /> -->
<textarea id="msg" rows="10" cols="50" placeholder="发送内容. . . "></textarea>
<button type="button" onClick="sendMessage()" class="btn">发送</button>
<button type="button" onClick="sendDisconnect()" class="btn">下线</button>
<button type="button" onClick="reloadThis()" class="btn">重连</button>
</form>
</body>
<script type="text/javascript">
var editor = CKEDITOR.replace( 'msg' );
editor.on("instanceReady",function(){
/* this.document.onkeydown=function(event){
alert(0);
var e = event || window.event || arguments.callee.caller.arguments[0]; if(event.ctrlKey&&event.keyCode==13){ // enter 键
//要做的事情
paraent.sendMessage();
}
}; */
this.document.on("keydown",function(){
//console.log(window.frames[0]);
var event = window.frames[0].event;
if(event.ctrlKey&&event.keyCode==13){ // enter 键
//要做的事情
sendMessage();
}
});
}); var socket;
connect();
//var socket = io.connect('http://192.168.0.207:9092'); function connect(){
socket = io.connect('ws://127.0.0.1:9092');
$("#name").val("你的小宝贝儿"+parseInt(Math.random()*100+1, 10)); socket.on('connect',function() {
serverOutput('<span class="connect-msg">欢迎进入聊天室!</span>');
//serverOutput('<span class="disconnect-msg">'+$("#name").val()+'已上线! </span>');
socket.emit('chatMany', {
userId:1,
userName : $("#name").val(),
receiveUserId:2,
content : "已上线!"
});
}); socket.on('chatMany', function(data) {
output('<span class="username-msg">'+'<img src="data:images/head.jpg" height="64" width="64"/>' + data.userName + ' : </span>'
+ data.content);
//editor.setData("");
//editor.updateElement();
}); socket.on('disconnect',function() {
serverOutput('<span class="disconnect-msg">'+$("#name").val()+'已下线! </span>'); });
} function reloadThis(){
socket.disconnect();
connect();
console.log(socket);
} function sendDisconnect() {
socket.emit('chatMany', {
userId:1,
userName : $("#name").val(),
receiveUserId:2,
content : "已下线!"
});
socket.disconnect();
} function sendMessage() {
var userName = $("#name").val()
var message = editor.getData();
$('#msg').val('');
socket.emit('chatMany', {
userId:1,
userName : userName,
receiveUserId:2,
content : message
});
//editor.setData("");
} function output(message) {
var currentTime = "<span class='time' >" + new Date() + "</span>";
var element = $("<div>" +" " + message + "</div>");
$('#console').prepend(element);
} function serverOutput(message){
var element = $("<div>" + message + "</div>");
$('#console').prepend(element);
} document.onkeydown=function(event){
//alert(0);
var e = event || window.event || arguments.callee.caller.arguments[0]; if(event.ctrlKey&&event.keyCode==13){ // enter 键
//要做的事情
sendMessage();
}
};
</script>
</html>
netty-socket.io点对点通讯和聊天室通讯的更多相关文章
- 利用socket.io+nodejs打造简单聊天室
代码地址如下:http://www.demodashi.com/demo/11579.html 界面展示: 首先展示demo的结果界面,只是简单消息的发送和接收,包括发送文字和发送图片. ws说明: ...
- html5的新通讯技术socket.io，实现一个聊天室
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue + socket.io实现一个简易聊天室
vue + vuex + elementUi + socket.io实现一个简易的在线聊天室,提高自己在对vue系列在项目中应用的深度.因为学会一个库或者框架容易,但要结合项目使用一个库或框架就不是那 ...
- 基于Node.js+socket.IO创建的Web聊天室
这段时间进了一个新的项目组,项目是用Appcan来做一个跨平台的移动运维系统,其中前台和后台之间本来是打算用WebSocket来实现的,但写好了示例后发现android不支持WebSocket,大为受 ...
- 基于react+react-router+redux+socket.io+koa开发一个聊天室
最近练手开发了一个项目,是一个聊天室应用.项目虽不大,但是使用到了react, react-router, redux, socket.io,后端开发使用了koa,算是一个比较综合性的案例,很多概念和 ...
- 利用socket.io实现多人聊天室(基于Nodejs)
socket.io简单介绍 在Html5中存在着这种一个新特性.引入了websocket,关于websocket的内部实现原理能够看这篇文章.这篇文章讲述了websocket无到有,依据协议,分析数据 ...
- 【Spring Boot】集成Netty Socket.IO通讯框架
服务端 @Configuration public class NettySocketConfig { private static final Logger logger = LoggerFacto ...
- Netty学习笔记(六) 简单的聊天室功能之WebSocket客户端开发实例
在之前的Netty相关学习笔记中,学习了如何去实现聊天室的服务段,这里我们来实现聊天室的客户端,聊天室的客户端使用的是Html5和WebSocket实现,下面我们继续学习. 创建客户端 接着第五个笔记 ...
- Netty学习笔记(四) 简单的聊天室功能之服务端开发
前面三个章节,我们使用了Netty实现了DISCARD丢弃服务和回复以及自定义编码解码,这篇博客,我们要用Netty实现简单的聊天室功能. Ps: 突然想起来大学里面有个课程实训,给予UDP还是TCP ...
随机推荐
- 我的2015plan
工作(熟悉业务流程,知道来龙去脉,提出改进优化,争取p6) 技术(读1个开源代码.多线程.网络编程) 技术类书籍(c++.python得深入) 读书(历史.经济.传记类) 状态(融入.投入.高效.平衡 ...
- Java的ThreadContext类加载器
疑惑 以前在看源码的时候,总是会遇到框架里的代码使用Thread.currentThread.getContextClassLoader()获取当前线程的Context类加载器,通过这个Context ...
- gdb调试汇总
1. 启动GDB开始调试: (1)gdb program ///最常用的用gdb启动程序,开始调试的方式(2)gdb program core ///用gdb查看core dump文件,跟踪程序cor ...
- Hibernate课程 初探一对多映射4-2 cascade级联属性
1 级联属性:hibernate一方和多方设置关联关系,当一方发生相应修改时(见下表),多方不用进行显式修改,也能进行相应修改. 级联在一方和多方xml中都可以设置 属性值 含义和作用 all 对 ...
- 处理移动端自适应布局的方法- calc()与vw
在处理移动端自适应布局时,目前前端最流行的方法应该就是使用媒体查询,来设置HTML的字体大小,然后用rem为单位对Dom的宽高进行设置,这个方法的优势在于兼容性方面很好,劣势则在于当前市场上不同的机型 ...
- CSS实现多重边框和内凹圆角
CSS实现多重边框 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&q ...
- Java 空对象设计模式(Null Object Pattern) 讲解
转自:http://www.cnblogs.com/haodawang/articles/5962531.html 有时候我们的代码中为避免 NullPointerException 会出现很多的对N ...
- SQL varchar转float实现数字比较
select * from table where cast('经纬度' as float ) < 90
- 使用fn_dblog函数查看事务日志和恢复数据
基本语法 SqlServer中有一个未在文档中公开的函数sys.fn_dblog,提供查询当前数据库事务日志的功能.通过这个函数,可以简单了解下数据库事务日志的机制 使用方法如下: select * ...
- PHP：global全局变量的使用
global全局变量能够让我们更好的去运用,直接上例子: 1.一个函数,获取函数外的内容: 得到的结果: 2.两个函数,函数2获取函数1的全局变量内容:(重点) 结果: 以上就是我的总结啦 END