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 ...
随机推荐
- jq案例中遇到的知识点总结(会飞的小鸟和三级联动)
1.会飞的小鸟 ,按键盘的上下左右键,小鸟会上下左右的飞 知识点:1.keyCode 键盘按键对应的数字 比如 左上右下键 对应 37 38 39 40: 2.小鸟的位置:var bBird=$(&q ...
- Python四大神兽（迭代器&生成器&闭包&装饰器）
一.迭代器 迭代是Python最强大的功能之一,是访问集合元素的一种方式.. 迭代器是一个可以记住遍历的位置的对象. 迭代器对象从集合的第一个元素开始访问,直到所有的元素被访问完结束.迭代器只能往前不 ...
- C#操作Excel报错：服务器出现意外情况。
C#操作Excel表格时,如遇以下错误: 服务器出现意外情况.(异常来自 HRESULT:0x80010105(RPC_E_SERVERFAULT)) 解决方案: 打开你电脑中的Office-Exce ...
- 让你迅速了解redis
(1)什么是redis? Redis 是一个基于内存的高性能key-value数据库. (2)Reids的特点 Redis本质上是一个Key-Value类型的内存数据库,很像memcached,整个数 ...
- 织梦dedecms去除友情链接中的li和span
文件:/include/taglib/flink.lib.php 1.去除友链中的li if(trim($ctag->GetInnerText())=='') $innertext = &quo ...
- ansible使用4-Playbook Roles and Include Statements
task include --- # possibly saved as tasks/foo.yml - name: placeholder foo command: /bin/foo - name: ...
- Asp.Net实现伪静态（通过URLRewriter）
一.起因 最近一个项目要实现伪静态,之前没接触过,故一切从零开始,开始网上查资料,方法大概有三种,但是我都试了好几个,都失败了.望有建议的博友给点建议,这里我实现了一种方式,是通过微软URLRewri ...
- polyfill 一个解决兼容的绝佳方案
polyfill为何物 Polyfill你可以理解为“腻子”,就是装修的时候,可以把缺损的地方填充抹平. 举个例子,html5的storage(session,local), 不同浏览器,不同版本,有 ...
- Js Date类型
一:格式化方法 var box=new Date(); //标准时间,如果没传参数,得到的时间为当前时间 //alert(Date.parse('4/12/2007')); //11763072000 ...
- *389. Find the Difference (string + map(26)) read problems carefully
Given two strings s and t which consist of only lowercase letters. String t is generated by random s ...