socketio单聊，群聊

最新推荐文章于 2024-08-15 09:39:21 发布

onyas

最新推荐文章于 2024-08-15 09:39:21 发布

阅读量6.7k

点赞数

分类专栏： J2EE 文章标签： socketio单聊群聊聊天室 SocketIOClient

本文链接：https://blog.csdn.net/zheng0518/article/details/50364330

版权

J2EE 专栏收录该内容

124 篇文章 1 订阅

订阅专栏

一个简单的聊天程序，功能有单聊，群聊

页面如下所示：

Name后面跟的是当前登录人的名字，下方的列表是当前在线的用户，双击该用户名后，可以给该用户发送消息。再次双击同一用户，下方会显示给所有(All)人发消息。

<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8"/>

    <title>Demo Chat</title>

    <link href="bootstrap.css" rel="stylesheet">

    <style>
        body {
            padding: 20px;
        }

        #console {
            height: 400px;
            overflow: auto;
        }

        .username-msg {
            color: orange;
        }

        .connect-msg {
            color: green;
        }

        .disconnect-msg {
            color: red;
        }

        .send-msg {
            color: #888
        }
    </style>


    <script src="js/socket.io/socket.io.js"></script>
    <script src="js/moment.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

    <script>

        var userName = 'user' + Math.floor((Math.random() * 1000) + 1);
        var socket = io.connect('http://localhost:9092');

        socket.on('connect', function () {
            output('<span class="connect-msg">Client has connected to the server!</span>');
            addUser(userName);
            var jsonObject = {
                userName: userName
            };
            $('#myName').text(userName);
            socket.emit('login', jsonObject);
        });

        socket.on('users', function (data) {
            $("#users").empty();//先清空已有的用户，然后在添加所有的
            for (var i = 0; i < data.length; i++)
                addUser(data[i]);
        });

        socket.on('groupChatEvent', function (data) {
            output('<span class="username-msg"> groupChat ' + data.userName + ':</span> ' + data.message);
        });

        socket.on('chatEvent', function (data) {
            output('<span class="username-msg"> chat ' + data.userName + ':</span> ' + data.message);
        });

        socket.on('disconnect', function () {
            output('<span class="disconnect-msg">The client has disconnected!</span>');
        });

        function sendDisconnect() {
            socket.disconnect();
        }

        function sendMessage() {
            var message = $('#msg').val();
            $('#msg').val('');

            var jsonObject;
            var toUser = $('#user').val();
            if (toUser == "All") {
                jsonObject = {
                    userName: userName,
                    message: message
                };
                socket.emit('groupChatEvent', jsonObject);
            } else {
                jsonObject = {
                    userName: userName,
                    message: message,
                    toUser: toUser
                };
                socket.emit('chatEvent', jsonObject);
                output('<span class="username-msg"> chat ' + data.userName + ':</span> ' + data.message);
            }
        }

        function output(message) {
            var currentTime = "<span class='time'>" + moment().format('HH:mm:ss.SSS') + "</span>";
            var element = $("<div>" + currentTime + " " + message + "</div>");
            $('#console').prepend(element);
        }
        function addUser(userName) {
            var element = $("<div οndblclick='singleChat(this)'>" + userName + "</div>");
            $('#users').prepend(element);
        }

        function singleChat(div) {
            if($('#user').val()==div.innerText){
                $('#user').val("All").show();
            }else{
                $('#user').val(div.innerText).show();
            }

        }

    </script>
</head>

<h1>Chat</h1>
Name:<span id="myName"></span>
<br/>

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span2">
            <div id="users">
                <div>test</div>
            </div>
        </div>
        <div class="span10">
            <div id="console" class="well">
            </div>
            <form class="well form-inline" οnsubmit="return false;">
                <input id="user" class="input-mini disabled" type="text" style="display: none" disabled>
                <input id="msg" class="input-xlarge" type="text" placeholder="Type something..."/>
                <button type="button" onClick="sendMessage()" class="btn">Send</button>
                <button type="button" onClick="sendDisconnect()" class="btn">Disconnect</button>
            </form>
        </div>
    </div>
</div>


</body>

</html>

package com.corundumstudio.socketio.demo;

import com.corundumstudio.socketio.AckRequest;
import com.corundumstudio.socketio.Configuration;
import com.corundumstudio.socketio.SocketIOClient;
import com.corundumstudio.socketio.SocketIOServer;
import com.corundumstudio.socketio.listener.DataListener;
import com.corundumstudio.socketio.listener.DisconnectListener;
import com.google.common.collect.BiMap;
import com.google.common.collect.HashBiMap;

import java.util.ArrayList;

public class ChatLauncher {
    private static BiMap<String,SocketIOClient> users = HashBiMap.create();
    private static ArrayList<String> userLists = new ArrayList<String>();

    public static void main(String[] args) throws InterruptedException {


        Configuration config = new Configuration();
        config.setHostname("localhost");
        config.setPort(9092);

        final SocketIOServer server = new SocketIOServer(config);
        server.addEventListener("groupChatEvent", ChatObject.class, new DataListener<ChatObject>() {
            @Override
            public void onData(SocketIOClient client, ChatObject data, AckRequest ackRequest) {
                // broadcast messages to all clients
                server.getBroadcastOperations().sendEvent("groupChatEvent", data);
            }
        });

        server.addEventListener("chatEvent", ChatObject.class, new DataListener<ChatObject>() {
            @Override
            public void onData(SocketIOClient socketIOClient, ChatObject chatObject, AckRequest ackRequest){
                System.out.println(chatObject);
                SocketIOClient fromSocketIoClient = users.get(chatObject.getUserName());
                SocketIOClient toSocketIoClient = users.get(chatObject.getToUser());
                if(toSocketIoClient!=null){
                    toSocketIoClient.sendEvent("chatEvent",chatObject);
                }
                if(fromSocketIoClient!=null){
                    fromSocketIoClient.sendEvent("chatEvent",chatObject);
                }
            }
        });

        server.addEventListener("login", ChatObject.class, new DataListener<ChatObject>() {
            @Override
            public void onData(SocketIOClient socketIOClient, ChatObject chatObject, AckRequest ackRequest) {
                users.put(chatObject.getUserName(),socketIOClient);
                userLists.add(chatObject.getUserName());
                server.getBroadcastOperations().sendEvent("users",userLists);
            }
        });

        server.addDisconnectListener(new DisconnectListener() {
            @Override
            public void onDisconnect(SocketIOClient socketIOClient) {
                String userName = users.inverse().get(socketIOClient);
                userLists.remove(userName);
                users.remove(userName);
                server.getBroadcastOperations().sendEvent("users", userLists);
            }
        });

        server.start();

        Thread.sleep(Integer.MAX_VALUE);

        server.stop();
    }

}