nettysocetio-demo1(nettysocetio通信,兩客戶端聊天,羣發消息改造)

時間 2019-11-18

標籤 nettysocetio demo1 demo 通信客戶端聊天消息改造简体版

原文原文鏈接

前言:
網上大多數都是隻能羣發,或者只能發給本身.並無一個案例完整的羣發而且又能夠客戶端之間聊天的案例,特此改造好的案例給你們分享一下.只要是一對一聊天,一對多羣發.javascript

內容:css

廢話很少說,直接上代碼:建立一個maven項目,而且把代碼複製過去.html

第一:實體類java

public class Msg implements Serializable{

        private static final long serialVersionUID = -6519304261259719883L;
        //源客戶端id
        private String userId;
        //源客戶端名字
        private String userName;
        //目標客戶端id
        private String receiveUserId;
        //消息內容
        private String content;

        public static long getSerialVersionUID() {
                return serialVersionUID;
        }

        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) {
                this.userId = userId;
                this.userName = userName;
                this.receiveUserId = receiveUserId;
                this.content = content;
        }
        public Msg() {
                super();
        }
}

第二:nettysocketio服務器啓動類jquery

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

第三:事件監聽
web

import com.corundumstudio.socketio.AckRequest;
import com.corundumstudio.socketio.SocketIOClient;
import com.corundumstudio.socketio.SocketIOServer;
import com.corundumstudio.socketio.listener.DataListener;

import java.util.UUID;
import java.util.concurrent.ConcurrentSkipListMap;

public class ChartListener implements DataListener<Msg>{

    SocketIOServer server;

    //全局變量
    private static final ConcurrentSkipListMap<String, UUID> webSocketMap_msg= new ConcurrentSkipListMap<String, UUID>();

    public void setServer(SocketIOServer server) {
        this.server = server;
    }

    public void onData(SocketIOClient socketIoClient, Msg msg, AckRequest askSender) throws Exception {
        System.out.println("一對一"+socketIoClient.getSessionId());

        //添加客戶端用戶
        if("已上線!".equals(msg.getContent())){
            webSocketMap_msg.put(msg.getUserId(),socketIoClient.getSessionId());
        }

        //清除離線客戶端用戶
        if("已下線!".equals(msg.getContent())){
            webSocketMap_msg.remove(msg.getUserId());
        }

        //客戶端發給本身 chatevent爲 事件的名稱， data，發送的內容
        this.server.getClient(socketIoClient.getSessionId()).sendEvent("chatOne",msg);

        //發送給指定客戶端
        this.server.getClient(webSocketMap_msg.get(msg.getReceiveUserId())).sendEvent("chatOne",msg);

        //羣發消息
        //this.server.getBroadcastOperations().sendEvent("chatMany", msg);

    }
}

第四:html頁面服務器

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>聊天室</title><base>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="../js/socket.io.js"></script>
    <script src="https://cdn.bootcss.com/ckeditor/4.8.0/ckeditor.js"></script>
    <style>
        body {
            padding: 20px;
        }
        #console {
            height: 200px;
            overflow: auto;
        }
        .username-msg {
            color: orange;
        }
        .connect-msg {
            color: green;
        }
        .disconnect-msg {
            color: red;
        }
        .send-msg {
            color: #888
        }
    </style>
</head>
<body onload="initLoad()">
<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="發送者name" />
    <input id="userId"  class="input-xlarge" type="hidden" placeholder="發送者" />
    <input id="receiveUserId" 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:8888');
        var user = parseInt(Math.random()*1000+1, 10);
        $("#userId").val(user);
        $("#name").val(user);

        socket.on('connect',function() {
            serverOutput('<span class="connect-msg">歡迎進入聊天室!</span>');
            //serverOutput('<span class="disconnect-msg">'+$("#name").val()+'已上線! </span>');
            socket.emit('chatOne', {
                userId:$("#userId").val(),
                userName :$("#name").val(),
                receiveUserId:$("#receiveUserId").val(),
                content : "已上線!"
            });
        });

        socket.on('chatOne', function(data) {
            output('<span class="username-msg">'+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:$("#userId").val(),
            userName :$("#name").val(),
            receiveUserId:$("#receiveUserId").val(),
            content : "已下線!"
        });
        socket.disconnect();
    }

    function sendMessage() {
        var message = editor.getData();
        $('#msg').val('');
        socket.emit('chatOne', {
            userId:$("#userId").val(),
            userName :$("#name").val(),
            receiveUserId:$("#receiveUserId").val(),
            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();
        }
    };

    function initLoad() {
        setInterval(function(){ sendDisconnect() }, 60000);
    }
</script>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。