使用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";//默认是localhost
    public 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 block
            e.printStackTrace();
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.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="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实现网页版的一对一聊天，小的先谢过了。