GoEasy与SocketIO实现一对一聊天（浏览器端与浏览器端的即时通信）

最新推荐文章于 2025-09-14 13:26:27 发布

原创最新推荐文章于 2025-09-14 13:26:27 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#java

socket 专栏收录该内容

2 篇文章

订阅专栏

本文介绍使用GoEasy和Socket.IO两种技术实现一对一实时聊天的具体步骤。包括GoEasy的账号注册、SDK集成及消息收发流程，以及Socket.IO的服务端配置、客户端连接与消息推送等关键环节。

一、GoEasy实现一对一聊天

1.在GoEasy官网（https://console.goeasy.io）注册账号，并创建应用，获得appkey

2.直接在页面引用<script type="text/javascript" src="https://cdn.goeasy.io/goeasy-1.2.0.js"></script>

3.初始化GoEasy

   <script type="text/javascript">
                    var goEasy = GoEasy.getInstance({
                        host:'hangzhou.goeasy.io', //应用所在的区域地址: 【hangzhou.goeasy.io |singapore.goeasy.io】
                        appkey: "您的appkey" //替换为您的应用appkey
                    });
</script>

4.连接GoEasy

   goEasy.connect({
                    onSuccess: function () {  //连接成功
                        console.log("GoEasy connect successfully.") //连接成功
                    },
                    onFailed: function (error) { //连接失败
                        console.log("Failed to connect GoEasy, code:"+error.code+ ",error:"+error.content);
                    },
                    onProgress:function(attempts) { //连接或自动重连中
                        console.log("GoEasy is connecting", attempts);
                    }
                });

5.订阅消息（消息的消费者）

    goEasy.subscribe({
        channel: "my_channel",//替换为您自己的channel
        onMessage: function (message) {
            console.log("Channel:" + message.channel + " content:" + message.content);
        },
        onSuccess: function () {
            console.log("Channel订阅成功。");
        },
        onFailed: function (error) {
            console.log("Channel订阅失败, 错误编码：" + error.code + " 错误信息：" + error.content)
        }
    });

6.发送消息（消息的生产者）

                        goEasy.publish({
                           channel: "my_channel",//替换为您自己的channel
                           message: "Hello GoEasy!",//替换为您想要发送的消息内容
                           onSuccess:function(){
                               console.log("消息发布成功。");
                           },
                           onFailed: function (error) {
                               console.log("消息发送失败，错误编码："+error.code+" 错误信息："+error.content);
                           }
                        });

7.示例

消息的生产者代码

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>DEMO01</title>
    <base>
    <script type="text/javascript" src="https://cdn.goeasy.io/goeasy-1.2.0.js"></script>
    <style>

    </style>
</head>

<body>

<button onclick="push()">推送</button>
</body>
<script type="text/javascript">

    //初始化GoEasy
    var goEasy = GoEasy.getInstance({
        host:'hangzhou.goeasy.io', //应用所在的区域地址: 【hangzhou.goeasy.io |singapore.goeasy.io】
        appkey: "********" //替换为您的应用appkey
    });

    //连接GoEasy（在接收和发送消息之前，必须要先连接GoEasy。）
    goEasy.connect({
        onSuccess: function () {  //连接成功
            console.log("GoEasy connect successfully.") //连接成功
        },
        onFailed: function (error) { //连接失败
            console.log("Failed to connect GoEasy, code:"+error.code+ ",error:"+error.content);
        },
        onProgress:function(attempts) { //连接或自动重连中
            console.log("GoEasy is connecting", attempts);
        }
    });

    //发送消息
    function push(){
        goEasy.publish({
            channel: "my_channel",//替换为您自己的channel
            message: "Hello GoEasy!",//替换为您想要发送的消息内容
            onSuccess:function(){
                console.log("消息发布成功。");
            },
            onFailed: function (error) {
                console.log("消息发送失败，错误编码："+error.code+" 错误信息："+error.content);
            }
        });
    }

</script>
</html>

消息的消费者代码

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>DEMO01</title>
    <base>
    <script type="text/javascript" src="https://cdn.goeasy.io/goeasy-1.2.0.js"></script>
    <style>

    </style>
</head>

<body>

</body>
<script type="text/javascript">

    //初始化GoEasy
    var goEasy = GoEasy.getInstance({
        host:'hangzhou.goeasy.io', //应用所在的区域地址: 【hangzhou.goeasy.io |singapore.goeasy.io】
        appkey: "*******" //替换为您的应用appkey
    });

    //连接GoEasy（在接收和发送消息之前，必须要先连接GoEasy。）
    goEasy.connect({
        onSuccess: function () {  //连接成功
            console.log("GoEasy connect successfully.") //连接成功
        },
        onFailed: function (error) { //连接失败
            console.log("Failed to connect GoEasy, code:"+error.code+ ",error:"+error.content);
        },
        onProgress:function(attempts) { //连接或自动重连中
            console.log("GoEasy is connecting", attempts);
        }
    });

    //订阅消息（接收）在发送消息之前，您需要先完成订阅操作, 来准备接收消息。
    goEasy.subscribe({
        channel: "my_channel",//替换为您自己的channel
        onMessage: function (message) {
            console.log("Channel:" + message.channel + " content:" + message.content);
        },
        onSuccess: function () {
            console.log("Channel订阅成功。");
        },
        onFailed: function (error) {
            console.log("Channel订阅失败, 错误编码：" + error.code + " 错误信息：" + error.content)
        }
    });

</script>
</html>

二、SocketIO实现一对一聊天

1.pom引入netty-socketio依赖

<dependency>
    <groupId>com.corundumstudio.socketio</groupId>
    <artifactId>netty-socketio</artifactId>
    <version>1.7.7</version>
</dependency>

2.socketio配置

#============================================================================
# netty socket io setting
#============================================================================
# host在本地测试可以设置为localhost或者本机IP，在Linux服务器跑可换成服务器IP
socketio.host=localhost
socketio.port=9099
# 设置最大每帧处理数据的长度，防止他人利用大数据来攻击服务器
socketio.maxFramePayloadLength=1048576
# 设置http交互最大内容长度
socketio.maxHttpContentLength=1048576
# socket连接数大小（如只监听一个端口boss线程组为1即可）
socketio.bossCount=2
socketio.workCount=100
socketio.allowCustomRequests=true
# 协议升级超时时间（毫秒），默认10秒。HTTP握手升级为ws协议超时时间
socketio.upgradeTimeout=1000000
# Ping消息超时时间（毫秒），默认60秒，这个时间间隔内没有接收到心跳消息就会发送超时事件
socketio.pingTimeout=6000000
# Ping消息间隔（毫秒），默认25秒。客户端向服务器发送一条心跳消息间隔
socketio.pingInterval=25000

3.新建SocketIOConfig

@Configuration
public class SocketIOConfig {

    @Value("${socketio.host}")
    private String host;

    @Value("${socketio.port}")
    private Integer port;

    @Value("${socketio.bossCount}")
    private int bossCount;

    @Value("${socketio.workCount}")
    private int workCount;

    @Value("${socketio.allowCustomRequests}")
    private boolean allowCustomRequests;

    @Value("${socketio.upgradeTimeout}")
    private int upgradeTimeout;

    @Value("${socketio.pingTimeout}")
    private int pingTimeout;

    @Value("${socketio.pingInterval}")
    private int pingInterval;

    /**
     * 以下配置在上面的application.properties中已经注明
     * @return
     */
    @Bean
    public SocketIOServer socketIOServer() {
        SocketConfig socketConfig = new SocketConfig();
        socketConfig.setTcpNoDelay(true);
        socketConfig.setSoLinger(0);
        com.corundumstudio.socketio.Configuration config = new com.corundumstudio.socketio.Configuration();
        config.setSocketConfig(socketConfig);
        config.setHostname(host);
        config.setPort(port);
        config.setBossThreads(bossCount);
        config.setWorkerThreads(workCount);
        config.setAllowCustomRequests(allowCustomRequests);
        config.setUpgradeTimeout(upgradeTimeout);
        config.setPingTimeout(pingTimeout);
        config.setPingInterval(pingInterval);
        return new SocketIOServer(config);
    }

}

4.新建SocketIOService以及SocketIOServiceImpl

public interface SocketIOService {
    //推送的事件
    public static final String PUSH_EVENT = "push_event";

    // 启动服务
    void start() throws Exception;

    // 停止服务
    void stop();

    // 推送信息
    void pushMessageToUser(PushMessage pushMessage);
}

@Service(value = "socketIOService")
public class SocketIOServiceImpl implements SocketIOService {


    // 用来存已连接的客户端
    //ConcurrentHashMap 线程安全的hashmap
    private static Map<String, SocketIOClient> clientMap = new ConcurrentHashMap<>();

    @Autowired
    private SocketIOServer socketIOServer;

    /**
     * Spring IoC容器创建之后，在加载SocketIOServiceImpl Bean之后启动
     *
     * @throws Exception
     */
    @PostConstruct
    private void autoStartup() throws Exception {
        start();
    }

    /**
     * Spring IoC容器在销毁SocketIOServiceImpl Bean之前关闭,避免重启项目服务端口占用问题
     *
     * @throws Exception
     */
    @PreDestroy
    private void autoStop() throws Exception {
        stop();
    }

    @Override
    public void start() throws Exception {
        // 监听客户端连接
        socketIOServer.addConnectListener(client -> {
            String loginUserNum = getParamsByClient(client);
            if (loginUserNum != null) {
                System.out.println(loginUserNum);
                System.out.println("SessionId:  " + client.getSessionId());
                System.out.println("RemoteAddress:  " + client.getRemoteAddress());
                System.out.println("Transport:  " + client.getTransport());
                System.out.println("用户名:"+loginUserNum+"发起连接"+"地址:"+client.getRemoteAddress());
                clientMap.put(loginUserNum, client);
            }
        });

        // 监听客户端断开连接
        socketIOServer.addDisconnectListener(client -> {
            String loginUserNum = getParamsByClient(client);
            if (loginUserNum != null) {
                clientMap.remove(loginUserNum);
                System.out.println("断开连接： " + loginUserNum);
                System.out.println("断开连接： " + client.getSessionId());
                System.out.println("用户名:"+loginUserNum+"断开连接"+"地址:"+client.getRemoteAddress());
                client.disconnect();
            }
        });

        // 处理自定义的事件，与连接监听类似
        socketIOServer.addEventListener("text", Object.class, (client, data, ackSender) -> {
            // TODO do something
            client.getHandshakeData();
            String loginUserNum = getParamsByClient(client);
            System.out.println( " 客户端"+loginUserNum+"：发来消息:************ " + data);
            String[] strArr = data.toString().split("\\+");
            System.out.println("接收人id = " + strArr[0]+"内容 "+strArr[1]);
            PushMessage pushMessage = new PushMessage();
            pushMessage.setLoginUserNum(Integer.parseInt(strArr[0]));
            pushMessage.setContent(strArr[1]);
            this.pushMessageToUser(pushMessage);
        });

        socketIOServer.start();
    }



    @Override
    public void stop() {
        if (socketIOServer != null) {
            socketIOServer.stop();
            socketIOServer = null;
        }
    }

    @Override
    public void pushMessageToUser(PushMessage pushMessage) {
        String loginUserNum = pushMessage.getLoginUserNum().toString();
        if (StringUtils.isNotBlank(loginUserNum)) {
            SocketIOClient client = clientMap.get(loginUserNum);
            if (client != null)
                client.sendEvent(PUSH_EVENT, pushMessage);
        }
    }

    /**
     * 此方法为获取client连接中的参数，可根据需求更改
     * @param client
     * @return
     */
    private String getParamsByClient(SocketIOClient client) {
        // 从请求的连接中拿出参数（这里的loginUserNum必须是唯一标识）
        Map<String, List<String>> params = client.getHandshakeData().getUrlParams();
        List<String> list = params.get("loginUserNum");
        if (list != null && list.size() > 0) {
            return list.get(0);
        }
        return null;
    }

    public static Map<String, SocketIOClient> getClientMap() {
        return clientMap;
    }

    public static void setClientMap(Map<String, SocketIOClient> clientMap) {
        SocketIOServiceImpl.clientMap = clientMap;
    }
}

PushMessage

@Data
@ToString
@AllArgsConstructor
@NoArgsConstructor
@Builder
public class PushMessage {

    // 登录用户编号
    private Integer loginUserNum;

    // 推送内容
    private String content;
}

5.前端页面

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>NETTY SOCKET.IO DEMO</title>
    <base>
    <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/socket.io/2.2.0/socket.io.js"></script>
    <style>
        body {
            padding: 20px;
        }
        #console {
            height: 450px;
            overflow: auto;
        }
        .username-msg {
            color: orange;
        }
        .my_username-msg {
            color: cadetblue;
        }
        .connect-msg {
            color: green;
        }
        .disconnect-msg {
            color: red;
        }
    </style>
</head>
<body>
<div id="console" class="well"></div>
接收人id:<input type="text" id="fromuserid"><br>
发送内容:<input type="text" id="msg"><br>
<button id="btnSend" onclick="send()">发送数据</button>
</body>
<script type="text/javascript">
    var socket;
    connect();
    function connect() {
        var num = Math.ceil(Math.random()*10);
        var loginUserNum = num;
        var opts = {
            query: 'loginUserNum=' + loginUserNum
        };
        socket = io.connect('http://localhost:9099', opts);
        socket.on('connect', function () {
            console.log("连接成功");
            serverOutput('<span class="connect-msg">'+loginUserNum+'连接成功</span>');
        });
        socket.on('push_event', function (data) {
            /*output('<span class="username-msg">' + data + ' </span>');*/
            output('<span class="username-msg">' + data.content + ' </span>');
            console.log(data);

        });

        socket.on('disconnect', function () {
            serverOutput('<span class="disconnect-msg">' + '已下线! </span>');
        });
    }

    function output(message) {
        var element = $("<div>" + " " + message + "</div>");
        $('#console').prepend(element);
    }

    function serverOutput(message) {
        var element = $("<div>" + message + "</div>");
        $('#console').prepend(element);
    }

    function send() {
        var fromuserid = $("#fromuserid").val();
        var msg = $("#msg").val();
        var str = fromuserid+"+"+msg;//消息接受人+消息内容 以‘+’分割
        //console.log('发送数据');
        output('<span class="my_username-msg">' + msg + ' </span>');
        socket.emit('text',str);
    }

</script>
</html>

启动项目测试