使用nettyio+socket.io搭建简单的网页聊天室

使用nettyio+socket.io搭建简单的网页聊天室

1 目录结构

2 maven 依赖配置

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><groupId>nettyio</groupId><artifactId>nettyio</artifactId><version>0.0.1-SNAPSHOT</version><packaging>war</packaging><properties><!-- log4j日志文件管理包版本 --><slf4j.version>1.7.7</slf4j.version><log4j.version>1.2.17</log4j.version></properties><dependencies><dependency><groupId>com.corundumstudio.socketio</groupId><artifactId>netty-socketio</artifactId><version>1.7.12</version></dependency><!-- 日志文件管理包 --><!-- log start --><dependency><groupId>log4j</groupId><artifactId>log4j</artifactId><version>${log4j.version}</version></dependency><!-- 格式化对象，方便输出日志 --><dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.1.41</version></dependency><dependency><groupId>org.slf4j</groupId><artifactId>slf4j-api</artifactId><version>${slf4j.version}</version></dependency><dependency><groupId>org.slf4j</groupId><artifactId>slf4j-log4j12</artifactId><version>${slf4j.version}</version></dependency></dependencies>
</project>

3 后台代码实现
a) 创建消息实体 Msg
直接贴代码

    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();}}

b) 创建websocket server MsgServer
代码如下

    public class MsgServer {public static void main(String[] args) throws InterruptedException {ServerContext.init();Configuration config = new Configuration();config.setHostname(ServerContext.serverIp);config.setPort(ServerContext.port);SocketIOServer server = new SocketIOServer(config);ChartListener listner = new ChartListener();listner.setServer(server);// chatevent为事件名称server.addEventListener("chatevent", Msg.class, listner);//启动服务server.start();Thread.sleep(Integer.MAX_VALUE);server.stop();}}

ServerContext 是初始化ip和端口的配置类

public class ServerContext {public static String serverIp = "localhost";//默认是localhostpublic static int port = 9093;//默认端口public static void init(){Properties properties = new Properties();try {properties.load(ServerContext.class.getClassLoader().getResourceAsStream("system.properties"));//new FileInputStream(new File("system.properties")serverIp = properties.getProperty("server.ip");port =  Integer.valueOf(properties.getProperty("server.port"));} catch (FileNotFoundException e) {// TODO Auto-generated catch blocke.printStackTrace();} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();}}
}

system.properties 配置了ip和端口

server.ip=192.168.0.207
server.port=9093

最后创建消息监听 ChartListener
代码如下

public class ChartListener implements DataListener<Msg>{SocketIOServer server;public void setServer(SocketIOServer server) {this.server = server;}public void onData(SocketIOClient socketIoClient, Msg msg, AckRequest askSender) throws Exception {// chatevent为 事件的名称， data为发送的内容this.server.getBroadcastOperations().sendEvent("chatevent", msg);}}

4 前端代码实现

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小张唠嗑</title><base>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/socket.io-1.4.5.js"></script>
<script src="ckeditor/ckeditor.js"></script>
<style>
body {padding: 20px;
}
#console {height: 650px;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://192.168.0.207:9093');$("#name").val("你的小宝贝儿"+parseInt(Math.random()*100+1, 10));socket.on('connect',function() {console.log("玩玩！");serverOutput('<span class="connect-msg">欢迎进入小张唠嗑聊天室!</span>');//serverOutput('<span class="disconnect-msg">'+$("#name").val()+'已上线! </span>');socket.emit('chatevent', {userId:1,userName : $("#name").val(),receiveUserId:2,content : "已上线!"});});socket.on('chatevent', 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('chatevent', {userId:1,userName : $("#name").val(),receiveUserId:2,content : "已下线!"});socket.disconnect();
}function sendMessage() {var userName = $("#name").val()var message = editor.getData();$('#msg').val('');socket.emit('chatevent', {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>

运行效果如下

over ，欢迎大家吐槽，另外，对netty io了解不深，希望大神指导，如何使用netty+ socket.io实现网页版的一对一聊天，小的先谢过了。

使用nettyio+socket.io搭建简单的网页聊天室相关推荐

Nodejs+socket.io 搭建个人的网页聊天室
Nodejs+socket.io 搭建个人的网页聊天室最近看到别人搭建了自己的实时聊天室便产生了兴趣,于是乎自己也着手搭建了一个.在socket这里我选用了socket.io这个模块,在网上看了很多 ...
socket.io php 聊天室,WebSocket学习（一）——基于socket.io实现简单多人聊天室
前言什么是Websocket呢? 我们都知道在Http协议中,客户端与服务器端的通信是靠客户端发起请求,然后服务器端收到请求再进行回应,这个过程中,客户端是主动的,服务器端是被动的.Websocke ...
Vue全家桶+Socket.io+Koa2打造一个智能聊天室接口已开放
Vue.js+Socket.io+Koa2打造一个智能聊天室 Vue.js全家桶+Socket.io+Express/Koa2 打造的一个智能聊天室. 已经开源啦!为了方便大家学习,智能机器人.IP定 ...
基于Python Tkiner、thread与socket实现的简单多人聊天室，在Python中创建TCP服务器与客户端进行通信
基于Python Tkiner.thread与socket实现的简单多人聊天室,在Python中创建TCP服务器与客户端进行通信完整代码下载地址:基于Python Tkiner.thread与soc ...
Java和WebSocket开发网页聊天室
一.项目简介 WebSocket是HTML5一种新的协议,它实现了浏览器与服务器全双工通信,这里就将使用WebSocket来开发网页聊天室,前端框架会使用AmazeUI,后台使用Java,编辑器使用U ...
基于WebSocket实现网页聊天室
背景在浏览器中通过http仅能实现单向的通信,comet可以一定程度上模拟双向通信,但效率较低,并需要服务器有较好的支持; flash中的socket和xmlsocket可以实现真正的双向通信,通过 ...
Spring Boot WebChat 网页聊天室
使用Spring Boot +Spring Security+Spring Data Jpa+Thymeleaf+Spring websocket 搭建的简易网页聊天室. 项目源码参考:http:// ...
使用Node.js+Socket.IO搭建WebSocket实时应用
Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新.它有着广泛的应用场景,比如在线聊天室.在线客服系统.评论系统.WebIM等. 作 ...
socket.io搭建分布式Web推送服务器
socket.io是目前较为流行的web实时推送框架,其基于nodejs语言开发,底层用engine.io实现. 借助nodejs语言异步的特性,其获得了不错的性能.但单个实例的socket.io依然 ...

使用nettyio+socket.io搭建简单的网页聊天室

使用nettyio+socket.io搭建简单的网页聊天室相关推荐

最新文章

热门文章