netty-socketio是基于netty的socket.io服务实现，能够无缝对接前端使用的socketio-client.js。
相对于javaee的原生websocket支持（@serverEndpoint）和spring-boot的MessageBroker(@messageMapping)，netty-socketio绝对是最好用的websocket后台实现。由于netty-socketio完整的实现了socket.io提供的监听前台事件、向指定客户端发送事件、将指定客户端加入指定房间、向指定房间广播事件、客户端从指定房间退出等操做。javascript
msg实体html
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(); } }
聊天室通信服务端可与多个客户端通信前端
测试方法，在不一样浏览器各打开一个聊天室页面，发送消息，所有都会接收到java
监听聊天室通信事件jquery
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); } }
点对点通信客户端只与服务端通信web
测试方法，在不一样浏览器各打开一个聊天室页面，发送消息，只有发送消息的那个客服端才能接收到消息spring
监听点对点通信事件跨域
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通信时跨域websocket
<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="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="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>