Setup project Spring boot 2.x + Socket.io Client 4.x

Sunday, 12/03/2023

Tram Ho

Hi, Today I will guide you to setup the simplest Java Spring boot + Socket.io Client project.

I have researched on the internet the tutorials on this topic, most of them guide to use this lib https://github.com/mrniko/netty-socketio .

There is a downside to it is that it is implemented on an existing Netty server, so if we use Spring boot to integrate, we will have to use 2 ports.

Making proj setup complicated when we have to configure 2 domains during dev and prod.
Difficulty in integrating security between Socket.io server and Spring security.

Without further ado, let’s get to work.

The familiar website of Springer dev. https://start.spring.io/

Dependencies:

JDK 17
Spring boot 2.x
Spring web
Websocket

This is the github of Socket.io java server

Please add this dependency.

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> dependency</span> <span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> groupId</span> <span class="token punctuation">&gt;</span></span> io.socket <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> groupId</span> <span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> artifactId</span> <span class="token punctuation">&gt;</span></span> socket.io-server <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> artifactId</span> <span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> version</span> <span class="token punctuation">&gt;</span></span> 4.0.1 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> version</span> <span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> dependency</span> <span class="token punctuation">&gt;</span></span>

< dependency >

< groupId > io.socket </ groupId >

< artifactId > socket.io-server </ artifactId >

< version > 4.0.1 </ version >

</ dependency >

Create proj dir according to ntn structure.

Classes.

<span class="token comment">/**
* @Author HuyVu
* @CreatedDate 2/24/2023 1:41 PM
*/</span>
<span class="token keyword">package</span> <span class="token namespace">io <span class="token punctuation">.</span> huyvu <span class="token punctuation">.</span> springbootsocketio <span class="token punctuation">.</span> config <span class="token punctuation">.</span> socketio</span> <span class="token punctuation">;</span>

<span class="token keyword">import</span> <span class="token namespace">io <span class="token punctuation">.</span> socket <span class="token punctuation">.</span> engineio <span class="token punctuation">.</span> server <span class="token punctuation">.</span></span> <span class="token class-name">EngineIoServer</span> <span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token namespace">io <span class="token punctuation">.</span> socket <span class="token punctuation">.</span> engineio <span class="token punctuation">.</span> server <span class="token punctuation">.</span></span> <span class="token class-name">EngineIoServerOptions</span> <span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token namespace">io <span class="token punctuation">.</span> socket <span class="token punctuation">.</span> socketio <span class="token punctuation">.</span> server <span class="token punctuation">.</span></span> <span class="token class-name">SocketIoNamespace</span> <span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token namespace">io <span class="token punctuation">.</span> socket <span class="token punctuation">.</span> socketio <span class="token punctuation">.</span> server <span class="token punctuation">.</span></span> <span class="token class-name">SocketIoServer</span> <span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token namespace">io <span class="token punctuation">.</span> socket <span class="token punctuation">.</span> socketio <span class="token punctuation">.</span> server <span class="token punctuation">.</span></span> <span class="token class-name">SocketIoSocket</span> <span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token namespace">org <span class="token punctuation">.</span> springframework <span class="token punctuation">.</span> context <span class="token punctuation">.</span> annotation <span class="token punctuation">.</span></span> <span class="token class-name">Bean</span> <span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token namespace">org <span class="token punctuation">.</span> springframework <span class="token punctuation">.</span> context <span class="token punctuation">.</span> annotation <span class="token punctuation">.</span></span> <span class="token class-name">Configuration</span> <span class="token punctuation">;</span>

<span class="token keyword">import</span> <span class="token namespace">java <span class="token punctuation">.</span> util <span class="token punctuation">.</span></span> <span class="token class-name">List</span> <span class="token punctuation">;</span>

<span class="token annotation punctuation">@Configuration</span>
<span class="token keyword">public</span> <span class="token keyword">class</span> <span class="token class-name">BeanConfig</span> <span class="token punctuation">{</span>

   <span class="token annotation punctuation">@Bean</span>
   <span class="token class-name">EngineIoServer</span> <span class="token function">engineIoServer</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
       <span class="token class-name">EngineIoServerOptions</span> opt <span class="token operator">=</span> <span class="token class-name">EngineIoServerOptions</span> <span class="token punctuation">.</span> <span class="token function">newFromDefault</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
       opt <span class="token punctuation">.</span> <span class="token function">setCorsHandlingDisabled</span> <span class="token punctuation">(</span> <span class="token boolean">true</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
       <span class="token class-name">EngineIoServer</span> eioServer <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">EngineIoServer</span> <span class="token punctuation">(</span> opt <span class="token punctuation">)</span> <span class="token punctuation">;</span>
       <span class="token keyword">return</span> eioServer <span class="token punctuation">;</span>
   <span class="token punctuation">}</span>

   <span class="token annotation punctuation">@Bean</span>
   <span class="token class-name">SocketIoServer</span> <span class="token function">socketIoServer</span> <span class="token punctuation">(</span> <span class="token class-name">EngineIoServer</span> eioServer <span class="token punctuation">)</span> <span class="token punctuation">{</span>
       <span class="token class-name">SocketIoServer</span> sioServer <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">SocketIoServer</span> <span class="token punctuation">(</span> eioServer <span class="token punctuation">)</span> <span class="token punctuation">;</span>

       <span class="token class-name">SocketIoNamespace</span> namespace <span class="token operator">=</span> sioServer <span class="token punctuation">.</span> <span class="token function">namespace</span> <span class="token punctuation">(</span> <span class="token string">"/mynamespace"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

       namespace <span class="token punctuation">.</span> <span class="token function">on</span> <span class="token punctuation">(</span> <span class="token string">"connection"</span> <span class="token punctuation">,</span> args <span class="token operator">-&gt;</span> <span class="token punctuation">{</span>
           <span class="token class-name">SocketIoSocket</span> socket <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token class-name">SocketIoSocket</span> <span class="token punctuation">)</span> args <span class="token punctuation">[</span> <span class="token number">0</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span>
           <span class="token class-name">System</span> <span class="token punctuation">.</span> out <span class="token punctuation">.</span> <span class="token function">println</span> <span class="token punctuation">(</span> <span class="token string">"Client "</span> <span class="token operator">+</span> socket <span class="token punctuation">.</span> <span class="token function">getId</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">" ("</span> <span class="token operator">+</span> socket <span class="token punctuation">.</span> <span class="token function">getInitialHeaders</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">get</span> <span class="token punctuation">(</span> <span class="token string">"remote_addr"</span> <span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">") has connected."</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

           socket <span class="token punctuation">.</span> <span class="token function">on</span> <span class="token punctuation">(</span> <span class="token string">"message"</span> <span class="token punctuation">,</span> args1 <span class="token operator">-&gt;</span> <span class="token punctuation">{</span>
               <span class="token class-name">System</span> <span class="token punctuation">.</span> out <span class="token punctuation">.</span> <span class="token function">println</span> <span class="token punctuation">(</span> <span class="token string">"[Client "</span> <span class="token operator">+</span> socket <span class="token punctuation">.</span> <span class="token function">getId</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">"] "</span> <span class="token operator">+</span> <span class="token class-name">List</span> <span class="token punctuation">.</span> <span class="token function">of</span> <span class="token punctuation">(</span> args1 <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
               socket <span class="token punctuation">.</span> <span class="token function">send</span> <span class="token punctuation">(</span> <span class="token string">"hello"</span> <span class="token punctuation">,</span> <span class="token string">"Heo khô đi những kỉ niệm xưa kia"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
           <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
       <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

       <span class="token keyword">return</span> sioServer <span class="token punctuation">;</span>
   <span class="token punctuation">}</span>

<span class="token punctuation">}</span>

/**

* @Author HuyVu

* @CreatedDate 2/24/2023 1:41 PM

*/

package io . huyvu . springbootsocketio . config . socketio ;

import io . socket . engineio . server . EngineIoServer ;

import io . socket . socketio . server . SocketIoNamespace ;

import io . socket . socketio . server . SocketIoServer ;

import io . socket . socketio . server . SocketIoSocket ;

import org . springframework . context . annotation . Bean ;

import org . springframework . context . annotation . Configuration ;

import java . util . List ;

@Configuration

public class BeanConfig {

@Bean

EngineIoServer engineIoServer ( ) {

EngineIoServerOptions opt = EngineIoServerOptions . newFromDefault ( ) ;

opt . setCorsHandlingDisabled ( true ) ;

EngineIoServer eioServer = new EngineIoServer ( opt ) ;

return eioServer ;

}

@Bean

SocketIoServer socketIoServer ( EngineIoServer eioServer ) {

SocketIoServer sioServer = new SocketIoServer ( eioServer ) ;

SocketIoNamespace namespace = sioServer . namespace ( "/mynamespace" ) ;

namespace . on ( "connection" , args -> {

SocketIoSocket socket = ( SocketIoSocket ) args [ 0 ] ;

System . out . println ( "Client " + socket . getId ( ) + " (" + socket . getInitialHeaders ( ) . get ( "remote_addr" ) + ") has connected." ) ;

socket . on ( "message" , args1 -> {

System . out . println ( "[Client " + socket . getId ( ) + "] " + List . of ( args1 ) ) ;

socket . send ( "hello" , "Heo khô đi những kỉ niệm xưa kia" ) ;

} ) ;

return sioServer ;

}

<span class="token keyword">package</span> <span class="token namespace">io <span class="token punctuation">.</span> huyvu <span class="token punctuation">.</span> springbootsocketio <span class="token punctuation">.</span> config <span class="token punctuation">.</span> socketio</span> <span class="token punctuation">;</span>

<span class="token keyword">import</span> <span class="token namespace">org <span class="token punctuation">.</span> springframework <span class="token punctuation">.</span> context <span class="token punctuation">.</span> annotation <span class="token punctuation">.</span></span> <span class="token class-name">Configuration</span> <span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token namespace">org <span class="token punctuation">.</span> springframework <span class="token punctuation">.</span> web <span class="token punctuation">.</span> socket <span class="token punctuation">.</span> config <span class="token punctuation">.</span> annotation <span class="token punctuation">.</span></span> <span class="token class-name">EnableWebSocket</span> <span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token namespace">org <span class="token punctuation">.</span> springframework <span class="token punctuation">.</span> web <span class="token punctuation">.</span> socket <span class="token punctuation">.</span> config <span class="token punctuation">.</span> annotation <span class="token punctuation">.</span></span> <span class="token class-name">WebSocketConfigurer</span> <span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token namespace">org <span class="token punctuation">.</span> springframework <span class="token punctuation">.</span> web <span class="token punctuation">.</span> socket <span class="token punctuation">.</span> config <span class="token punctuation">.</span> annotation <span class="token punctuation">.</span></span> <span class="token class-name">WebSocketHandlerRegistry</span> <span class="token punctuation">;</span>

<span class="token annotation punctuation">@Configuration</span>
<span class="token annotation punctuation">@EnableWebSocket</span>
<span class="token keyword">public</span> <span class="token keyword">class</span> <span class="token class-name">EngineIoConfigurator</span> <span class="token keyword">implements</span> <span class="token class-name">WebSocketConfigurer</span> <span class="token punctuation">{</span>

    <span class="token keyword">private</span> <span class="token keyword">final</span> <span class="token class-name">EngineIoHandler</span> mEngineIoHandler <span class="token punctuation">;</span>

    <span class="token keyword">public</span> <span class="token class-name">EngineIoConfigurator</span> <span class="token punctuation">(</span> <span class="token class-name">EngineIoHandler</span> engineIoHandler <span class="token punctuation">)</span> <span class="token punctuation">{</span>
        mEngineIoHandler <span class="token operator">=</span> engineIoHandler <span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token annotation punctuation">@Override</span>
    <span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">registerWebSocketHandlers</span> <span class="token punctuation">(</span> <span class="token class-name">WebSocketHandlerRegistry</span> registry <span class="token punctuation">)</span> <span class="token punctuation">{</span>
        registry <span class="token punctuation">.</span> <span class="token function">addHandler</span> <span class="token punctuation">(</span> mEngineIoHandler <span class="token punctuation">,</span> <span class="token string">"/socket.io/"</span> <span class="token punctuation">)</span>
                <span class="token punctuation">.</span> <span class="token function">addInterceptors</span> <span class="token punctuation">(</span> mEngineIoHandler <span class="token punctuation">)</span>
                <span class="token punctuation">.</span> <span class="token function">setAllowedOrigins</span> <span class="token punctuation">(</span> <span class="token string">"*"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

import org . springframework . context . annotation . Configuration ;

import org . springframework . web . socket . config . annotation . EnableWebSocket ;

import org . springframework . web . socket . config . annotation . WebSocketConfigurer ;

import org . springframework . web . socket . config . annotation . WebSocketHandlerRegistry ;

@Configuration

@EnableWebSocket

public class EngineIoConfigurator implements WebSocketConfigurer {

private final EngineIoHandler mEngineIoHandler ;

public EngineIoConfigurator ( EngineIoHandler engineIoHandler ) {

mEngineIoHandler = engineIoHandler ;

}

@Override

public void registerWebSocketHandlers ( WebSocketHandlerRegistry registry ) {

registry . addHandler ( mEngineIoHandler , "/socket.io/" )

. addInterceptors ( mEngineIoHandler )

. setAllowedOrigins ( "*" ) ;

}

<span class="token keyword">package</span> <span class="token namespace">io <span class="token punctuation">.</span> huyvu <span class="token punctuation">.</span> springbootsocketio <span class="token punctuation">.</span> config <span class="token punctuation">.</span> socketio</span> <span class="token punctuation">;</span>

<span class="token keyword">import</span> <span class="token namespace">io <span class="token punctuation">.</span> socket <span class="token punctuation">.</span> engineio <span class="token punctuation">.</span> server <span class="token punctuation">.</span></span> <span class="token class-name">EngineIoServer</span> <span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token namespace">io <span class="token punctuation">.</span> socket <span class="token punctuation">.</span> engineio <span class="token punctuation">.</span> server <span class="token punctuation">.</span></span> <span class="token class-name">EngineIoWebSocket</span> <span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token namespace">io <span class="token punctuation">.</span> socket <span class="token punctuation">.</span> engineio <span class="token punctuation">.</span> server <span class="token punctuation">.</span> utils <span class="token punctuation">.</span></span> <span class="token class-name">ParseQS</span> <span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token namespace">org <span class="token punctuation">.</span> springframework <span class="token punctuation">.</span> http <span class="token punctuation">.</span> server <span class="token punctuation">.</span></span> <span class="token class-name">ServerHttpRequest</span> <span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token namespace">org <span class="token punctuation">.</span> springframework <span class="token punctuation">.</span> http <span class="token punctuation">.</span> server <span class="token punctuation">.</span></span> <span class="token class-name">ServerHttpResponse</span> <span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token namespace">org <span class="token punctuation">.</span> springframework <span class="token punctuation">.</span> stereotype <span class="token punctuation">.</span></span> <span class="token class-name">Controller</span> <span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token namespace">org <span class="token punctuation">.</span> springframework <span class="token punctuation">.</span> web <span class="token punctuation">.</span> bind <span class="token punctuation">.</span> annotation <span class="token punctuation">.</span></span> <span class="token class-name">RequestMapping</span> <span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token namespace">org <span class="token punctuation">.</span> springframework <span class="token punctuation">.</span> web <span class="token punctuation">.</span> bind <span class="token punctuation">.</span> annotation <span class="token punctuation">.</span></span> <span class="token class-name">RequestMethod</span> <span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token namespace">org <span class="token punctuation">.</span> springframework <span class="token punctuation">.</span> web <span class="token punctuation">.</span> socket <span class="token punctuation">.</span></span> <span class="token operator">*</span> <span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token namespace">org <span class="token punctuation">.</span> springframework <span class="token punctuation">.</span> web <span class="token punctuation">.</span> socket <span class="token punctuation">.</span> server <span class="token punctuation">.</span></span> <span class="token class-name">HandshakeInterceptor</span> <span class="token punctuation">;</span>

<span class="token keyword">import</span> <span class="token namespace">javax <span class="token punctuation">.</span> servlet <span class="token punctuation">.</span> http <span class="token punctuation">.</span></span> <span class="token class-name">HttpServletRequest</span> <span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token namespace">javax <span class="token punctuation">.</span> servlet <span class="token punctuation">.</span> http <span class="token punctuation">.</span></span> <span class="token class-name">HttpServletResponse</span> <span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token namespace">java <span class="token punctuation">.</span> io <span class="token punctuation">.</span></span> <span class="token class-name">IOException</span> <span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token namespace">java <span class="token punctuation">.</span> util <span class="token punctuation">.</span></span> <span class="token class-name">HashMap</span> <span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token namespace">java <span class="token punctuation">.</span> util <span class="token punctuation">.</span></span> <span class="token class-name">List</span> <span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token namespace">java <span class="token punctuation">.</span> util <span class="token punctuation">.</span></span> <span class="token class-name">Map</span> <span class="token punctuation">;</span>

<span class="token annotation punctuation">@Controller</span>
<span class="token keyword">public</span> <span class="token keyword">class</span> <span class="token class-name">EngineIoHandler</span> <span class="token keyword">implements</span> <span class="token class-name">HandshakeInterceptor</span> <span class="token punctuation">,</span> <span class="token class-name">WebSocketHandler</span> <span class="token punctuation">{</span>

    <span class="token keyword">private</span> <span class="token keyword">static</span> <span class="token keyword">final</span> <span class="token class-name">String</span> ATTRIBUTE_ENGINE_IO_BRIDGE <span class="token operator">=</span> <span class="token string">"engine.io.bridge"</span> <span class="token punctuation">;</span>
    <span class="token keyword">private</span> <span class="token keyword">static</span> <span class="token keyword">final</span> <span class="token class-name">String</span> ATTRIBUTE_ENGINE_IO_QUERY <span class="token operator">=</span> <span class="token string">"engine.io.query"</span> <span class="token punctuation">;</span>
    <span class="token keyword">private</span> <span class="token keyword">static</span> <span class="token keyword">final</span> <span class="token class-name">String</span> ATTRIBUTE_ENGINE_IO_HEADERS <span class="token operator">=</span> <span class="token string">"engine.io.headers"</span> <span class="token punctuation">;</span>

    <span class="token keyword">private</span> <span class="token keyword">final</span> <span class="token class-name">EngineIoServer</span> mEngineIoServer <span class="token punctuation">;</span>

    <span class="token keyword">public</span> <span class="token class-name">EngineIoHandler</span> <span class="token punctuation">(</span> <span class="token class-name">EngineIoServer</span> engineIoServer <span class="token punctuation">)</span> <span class="token punctuation">{</span>
        mEngineIoServer <span class="token operator">=</span> engineIoServer <span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token annotation punctuation">@RequestMapping</span> <span class="token punctuation">(</span>
            value <span class="token operator">=</span> <span class="token string">"/socket.io/"</span> <span class="token punctuation">,</span>
            method <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token class-name">RequestMethod</span> <span class="token punctuation">.</span> GET <span class="token punctuation">,</span> <span class="token class-name">RequestMethod</span> <span class="token punctuation">.</span> POST <span class="token punctuation">,</span> <span class="token class-name">RequestMethod</span> <span class="token punctuation">.</span> OPTIONS <span class="token punctuation">}</span> <span class="token punctuation">,</span>
            headers <span class="token operator">=</span> <span class="token string">"Connection!=Upgrade"</span> <span class="token punctuation">)</span>
    <span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">httpHandler</span> <span class="token punctuation">(</span> <span class="token class-name">HttpServletRequest</span> request <span class="token punctuation">,</span> <span class="token class-name">HttpServletResponse</span> response <span class="token punctuation">)</span> <span class="token keyword">throws</span> <span class="token class-name">IOException</span> <span class="token punctuation">{</span>
        mEngineIoServer <span class="token punctuation">.</span> <span class="token function">handleRequest</span> <span class="token punctuation">(</span> request <span class="token punctuation">,</span> response <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token comment">/* HandshakeInterceptor */</span>

    <span class="token annotation punctuation">@Override</span>
    <span class="token keyword">public</span> <span class="token keyword">boolean</span> <span class="token function">beforeHandshake</span> <span class="token punctuation">(</span> <span class="token class-name">ServerHttpRequest</span> request <span class="token punctuation">,</span> <span class="token class-name">ServerHttpResponse</span> response <span class="token punctuation">,</span> <span class="token class-name">WebSocketHandler</span> wsHandler <span class="token punctuation">,</span> <span class="token class-name">Map</span> <span class="token generics"><span class="token punctuation">&lt;</span> <span class="token class-name">String</span> <span class="token punctuation">,</span> <span class="token class-name">Object</span> <span class="token punctuation">&gt;</span></span> attributes <span class="token punctuation">)</span> <span class="token punctuation">{</span>
        attributes <span class="token punctuation">.</span> <span class="token function">put</span> <span class="token punctuation">(</span> ATTRIBUTE_ENGINE_IO_QUERY <span class="token punctuation">,</span> request <span class="token punctuation">.</span> <span class="token function">getURI</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">getQuery</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
        attributes <span class="token punctuation">.</span> <span class="token function">put</span> <span class="token punctuation">(</span> ATTRIBUTE_ENGINE_IO_HEADERS <span class="token punctuation">,</span> request <span class="token punctuation">.</span> <span class="token function">getHeaders</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
        <span class="token keyword">return</span> <span class="token boolean">true</span> <span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token annotation punctuation">@Override</span>
    <span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">afterHandshake</span> <span class="token punctuation">(</span> <span class="token class-name">ServerHttpRequest</span> request <span class="token punctuation">,</span> <span class="token class-name">ServerHttpResponse</span> response <span class="token punctuation">,</span> <span class="token class-name">WebSocketHandler</span> wsHandler <span class="token punctuation">,</span> <span class="token class-name">Exception</span> exception <span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token punctuation">}</span>

    <span class="token comment">/* WebSocketHandler */</span>

    <span class="token annotation punctuation">@Override</span>
    <span class="token keyword">public</span> <span class="token keyword">boolean</span> <span class="token function">supportsPartialMessages</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token boolean">false</span> <span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token annotation punctuation">@Override</span>
    <span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">afterConnectionEstablished</span> <span class="token punctuation">(</span> <span class="token class-name">WebSocketSession</span> webSocketSession <span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">final</span> <span class="token class-name">EngineIoSpringWebSocket</span> webSocket <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">EngineIoSpringWebSocket</span> <span class="token punctuation">(</span> webSocketSession <span class="token punctuation">)</span> <span class="token punctuation">;</span>
        webSocketSession <span class="token punctuation">.</span> <span class="token function">getAttributes</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">put</span> <span class="token punctuation">(</span> ATTRIBUTE_ENGINE_IO_BRIDGE <span class="token punctuation">,</span> webSocket <span class="token punctuation">)</span> <span class="token punctuation">;</span>
        mEngineIoServer <span class="token punctuation">.</span> <span class="token function">handleWebSocket</span> <span class="token punctuation">(</span> webSocket <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token annotation punctuation">@Override</span>
    <span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">afterConnectionClosed</span> <span class="token punctuation">(</span> <span class="token class-name">WebSocketSession</span> webSocketSession <span class="token punctuation">,</span> <span class="token class-name">CloseStatus</span> closeStatus <span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token class-name">EngineIoSpringWebSocket</span> <span class="token punctuation">)</span> webSocketSession <span class="token punctuation">.</span> <span class="token function">getAttributes</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">get</span> <span class="token punctuation">(</span> ATTRIBUTE_ENGINE_IO_BRIDGE <span class="token punctuation">)</span> <span class="token punctuation">)</span>
                <span class="token punctuation">.</span> <span class="token function">afterConnectionClosed</span> <span class="token punctuation">(</span> closeStatus <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token annotation punctuation">@Override</span>
    <span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">handleMessage</span> <span class="token punctuation">(</span> <span class="token class-name">WebSocketSession</span> webSocketSession <span class="token punctuation">,</span> <span class="token class-name">WebSocketMessage</span> <span class="token generics"><span class="token punctuation">&lt;</span> <span class="token operator">?</span> <span class="token punctuation">&gt;</span></span> webSocketMessage <span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token class-name">EngineIoSpringWebSocket</span> <span class="token punctuation">)</span> webSocketSession <span class="token punctuation">.</span> <span class="token function">getAttributes</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">get</span> <span class="token punctuation">(</span> ATTRIBUTE_ENGINE_IO_BRIDGE <span class="token punctuation">)</span> <span class="token punctuation">)</span>
                <span class="token punctuation">.</span> <span class="token function">handleMessage</span> <span class="token punctuation">(</span> webSocketMessage <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token annotation punctuation">@Override</span>
    <span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">handleTransportError</span> <span class="token punctuation">(</span> <span class="token class-name">WebSocketSession</span> webSocketSession <span class="token punctuation">,</span> <span class="token class-name">Throwable</span> throwable <span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token class-name">EngineIoSpringWebSocket</span> <span class="token punctuation">)</span> webSocketSession <span class="token punctuation">.</span> <span class="token function">getAttributes</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">get</span> <span class="token punctuation">(</span> ATTRIBUTE_ENGINE_IO_BRIDGE <span class="token punctuation">)</span> <span class="token punctuation">)</span>
                <span class="token punctuation">.</span> <span class="token function">handleTransportError</span> <span class="token punctuation">(</span> throwable <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token keyword">private</span> <span class="token keyword">static</span> <span class="token keyword">final</span> <span class="token keyword">class</span> <span class="token class-name">EngineIoSpringWebSocket</span> <span class="token keyword">extends</span> <span class="token class-name">EngineIoWebSocket</span> <span class="token punctuation">{</span>

        <span class="token keyword">private</span> <span class="token keyword">final</span> <span class="token class-name">WebSocketSession</span> mSession <span class="token punctuation">;</span>
        <span class="token keyword">private</span> <span class="token keyword">final</span> <span class="token class-name">Map</span> <span class="token generics"><span class="token punctuation">&lt;</span> <span class="token class-name">String</span> <span class="token punctuation">,</span> <span class="token class-name">String</span> <span class="token punctuation">&gt;</span></span> mQuery <span class="token punctuation">;</span>
        <span class="token keyword">private</span> <span class="token keyword">final</span> <span class="token class-name">Map</span> <span class="token generics"><span class="token punctuation">&lt;</span> <span class="token class-name">String</span> <span class="token punctuation">,</span> <span class="token class-name">List</span> <span class="token punctuation">&lt;</span> <span class="token class-name">String</span> <span class="token punctuation">&gt;</span> <span class="token punctuation">&gt;</span></span> mHeaders <span class="token punctuation">;</span>

        <span class="token class-name">EngineIoSpringWebSocket</span> <span class="token punctuation">(</span> <span class="token class-name">WebSocketSession</span> session <span class="token punctuation">)</span> <span class="token punctuation">{</span>
            mSession <span class="token operator">=</span> session <span class="token punctuation">;</span>

            <span class="token keyword">final</span> <span class="token class-name">String</span> queryString <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token class-name">String</span> <span class="token punctuation">)</span> mSession <span class="token punctuation">.</span> <span class="token function">getAttributes</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">get</span> <span class="token punctuation">(</span> ATTRIBUTE_ENGINE_IO_QUERY <span class="token punctuation">)</span> <span class="token punctuation">;</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span> queryString <span class="token operator">!=</span> <span class="token keyword">null</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
                mQuery <span class="token operator">=</span> <span class="token class-name">ParseQS</span> <span class="token punctuation">.</span> <span class="token function">decode</span> <span class="token punctuation">(</span> queryString <span class="token punctuation">)</span> <span class="token punctuation">;</span>
            <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
                mQuery <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">HashMap</span> <span class="token generics"><span class="token punctuation">&lt;</span> <span class="token punctuation">&gt;</span></span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
            <span class="token keyword">this</span> <span class="token punctuation">.</span> mHeaders <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token class-name">Map</span> <span class="token generics"><span class="token punctuation">&lt;</span> <span class="token class-name">String</span> <span class="token punctuation">,</span> <span class="token class-name">List</span> <span class="token punctuation">&lt;</span> <span class="token class-name">String</span> <span class="token punctuation">&gt;</span> <span class="token punctuation">&gt;</span></span> <span class="token punctuation">)</span> mSession <span class="token punctuation">.</span> <span class="token function">getAttributes</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">get</span> <span class="token punctuation">(</span> ATTRIBUTE_ENGINE_IO_HEADERS <span class="token punctuation">)</span> <span class="token punctuation">;</span>
        <span class="token punctuation">}</span>

        <span class="token comment">/* EngineIoWebSocket */</span>

        <span class="token annotation punctuation">@Override</span>
        <span class="token keyword">public</span> <span class="token class-name">Map</span> <span class="token generics"><span class="token punctuation">&lt;</span> <span class="token class-name">String</span> <span class="token punctuation">,</span> <span class="token class-name">String</span> <span class="token punctuation">&gt;</span></span> <span class="token function">getQuery</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> mQuery <span class="token punctuation">;</span>
        <span class="token punctuation">}</span>

        <span class="token annotation punctuation">@Override</span>
        <span class="token keyword">public</span> <span class="token class-name">Map</span> <span class="token generics"><span class="token punctuation">&lt;</span> <span class="token class-name">String</span> <span class="token punctuation">,</span> <span class="token class-name">List</span> <span class="token punctuation">&lt;</span> <span class="token class-name">String</span> <span class="token punctuation">&gt;</span> <span class="token punctuation">&gt;</span></span> <span class="token function">getConnectionHeaders</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> mHeaders <span class="token punctuation">;</span>
        <span class="token punctuation">}</span>

        <span class="token annotation punctuation">@Override</span>
        <span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">write</span> <span class="token punctuation">(</span> <span class="token class-name">String</span> message <span class="token punctuation">)</span> <span class="token keyword">throws</span> <span class="token class-name">IOException</span> <span class="token punctuation">{</span>
            mSession <span class="token punctuation">.</span> <span class="token function">sendMessage</span> <span class="token punctuation">(</span> <span class="token keyword">new</span> <span class="token class-name">TextMessage</span> <span class="token punctuation">(</span> message <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
        <span class="token punctuation">}</span>

        <span class="token annotation punctuation">@Override</span>
        <span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">write</span> <span class="token punctuation">(</span> <span class="token keyword">byte</span> <span class="token punctuation">[</span> <span class="token punctuation">]</span> message <span class="token punctuation">)</span> <span class="token keyword">throws</span> <span class="token class-name">IOException</span> <span class="token punctuation">{</span>
            mSession <span class="token punctuation">.</span> <span class="token function">sendMessage</span> <span class="token punctuation">(</span> <span class="token keyword">new</span> <span class="token class-name">BinaryMessage</span> <span class="token punctuation">(</span> message <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
        <span class="token punctuation">}</span>

        <span class="token annotation punctuation">@Override</span>
        <span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">close</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">try</span> <span class="token punctuation">{</span>
                mSession <span class="token punctuation">.</span> <span class="token function">close</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
            <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span> <span class="token class-name">IOException</span> ignore <span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>

        <span class="token comment">/* WebSocketHandler */</span>

        <span class="token keyword">void</span> <span class="token function">afterConnectionClosed</span> <span class="token punctuation">(</span> <span class="token class-name">CloseStatus</span> closeStatus <span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token function">emit</span> <span class="token punctuation">(</span> <span class="token string">"close"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
        <span class="token punctuation">}</span>

        <span class="token keyword">void</span> <span class="token function">handleMessage</span> <span class="token punctuation">(</span> <span class="token class-name">WebSocketMessage</span> <span class="token generics"><span class="token punctuation">&lt;</span> <span class="token operator">?</span> <span class="token punctuation">&gt;</span></span> message <span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span> message <span class="token punctuation">.</span> <span class="token function">getPayload</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token keyword">instanceof</span> <span class="token class-name">String</span> <span class="token operator">||</span> message <span class="token punctuation">.</span> <span class="token function">getPayload</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token keyword">instanceof</span> <span class="token keyword">byte</span> <span class="token punctuation">[</span> <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token function">emit</span> <span class="token punctuation">(</span> <span class="token string">"message"</span> <span class="token punctuation">,</span> <span class="token punctuation">(</span> <span class="token class-name">Object</span> <span class="token punctuation">)</span> message <span class="token punctuation">.</span> <span class="token function">getPayload</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
            <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
                <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">RuntimeException</span> <span class="token punctuation">(</span> <span class="token class-name">String</span> <span class="token punctuation">.</span> <span class="token function">format</span> <span class="token punctuation">(</span>
                        <span class="token string">"Invalid message type received: %s. Expected String or byte[]."</span> <span class="token punctuation">,</span>
                        message <span class="token punctuation">.</span> <span class="token function">getPayload</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">getClass</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">getName</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>

        <span class="token keyword">void</span> <span class="token function">handleTransportError</span> <span class="token punctuation">(</span> <span class="token class-name">Throwable</span> exception <span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token function">emit</span> <span class="token punctuation">(</span> <span class="token string">"error"</span> <span class="token punctuation">,</span> <span class="token string">"write error"</span> <span class="token punctuation">,</span> exception <span class="token punctuation">.</span> <span class="token function">getMessage</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

import io . socket . engineio . server . EngineIoWebSocket ;

import io . socket . engineio . server . utils . ParseQS ;

import org . springframework . http . server . ServerHttpRequest ;

import org . springframework . http . server . ServerHttpResponse ;

import org . springframework . web . bind . annotation . RequestMapping ;

import org . springframework . web . bind . annotation . RequestMethod ;

import org . springframework . web . socket . * ;

import org . springframework . web . socket . server . HandshakeInterceptor ;

import javax . servlet . http . HttpServletRequest ;

import javax . servlet . http . HttpServletResponse ;

import java . io . IOException ;

import java . util . HashMap ;

import java . util . Map ;

@Controller

public class EngineIoHandler implements HandshakeInterceptor , WebSocketHandler {

private static final String ATTRIBUTE_ENGINE_IO_BRIDGE = "engine.io.bridge" ;

private static final String ATTRIBUTE_ENGINE_IO_QUERY = "engine.io.query" ;

private static final String ATTRIBUTE_ENGINE_IO_HEADERS = "engine.io.headers" ;

private final EngineIoServer mEngineIoServer ;

public EngineIoHandler ( EngineIoServer engineIoServer ) {

mEngineIoServer = engineIoServer ;

}

@RequestMapping (

value = "/socket.io/" ,

method = { RequestMethod . GET , RequestMethod . POST , RequestMethod . OPTIONS } ,

headers = "Connection!=Upgrade" )

public void httpHandler ( HttpServletRequest request , HttpServletResponse response ) throws IOException {

mEngineIoServer . handleRequest ( request , response ) ;

}

/* HandshakeInterceptor */

@Override

public boolean beforeHandshake ( ServerHttpRequest request , ServerHttpResponse response , WebSocketHandler wsHandler , Map < String , Object > attributes ) {

attributes . put ( ATTRIBUTE_ENGINE_IO_QUERY , request . getURI ( ) . getQuery ( ) ) ;

attributes . put ( ATTRIBUTE_ENGINE_IO_HEADERS , request . getHeaders ( ) ) ;

return true ;

}

@Override

public void afterHandshake ( ServerHttpRequest request , ServerHttpResponse response , WebSocketHandler wsHandler , Exception exception ) {

}

/* WebSocketHandler */

@Override

public boolean supportsPartialMessages ( ) {

return false ;

}

@Override

public void afterConnectionEstablished ( WebSocketSession webSocketSession ) {

final EngineIoSpringWebSocket webSocket = new EngineIoSpringWebSocket ( webSocketSession ) ;

webSocketSession . getAttributes ( ) . put ( ATTRIBUTE_ENGINE_IO_BRIDGE , webSocket ) ;

mEngineIoServer . handleWebSocket ( webSocket ) ;

}

@Override

public void afterConnectionClosed ( WebSocketSession webSocketSession , CloseStatus closeStatus ) {

( ( EngineIoSpringWebSocket ) webSocketSession . getAttributes ( ) . get ( ATTRIBUTE_ENGINE_IO_BRIDGE ) )

. afterConnectionClosed ( closeStatus ) ;

}

@Override

public void handleMessage ( WebSocketSession webSocketSession , WebSocketMessage < ? > webSocketMessage ) {

. handleMessage ( webSocketMessage ) ;

}

@Override

public void handleTransportError ( WebSocketSession webSocketSession , Throwable throwable ) {

. handleTransportError ( throwable ) ;

}

private static final class EngineIoSpringWebSocket extends EngineIoWebSocket {

private final WebSocketSession mSession ;

private final Map < String , String > mQuery ;

private final Map < String , List < String > > mHeaders ;

EngineIoSpringWebSocket ( WebSocketSession session ) {

mSession = session ;

final String queryString = ( String ) mSession . getAttributes ( ) . get ( ATTRIBUTE_ENGINE_IO_QUERY ) ;

if ( queryString != null ) {

mQuery = ParseQS . decode ( queryString ) ;

} else {

mQuery = new HashMap < > ( ) ;

}

this . mHeaders = ( Map < String , List < String > > ) mSession . getAttributes ( ) . get ( ATTRIBUTE_ENGINE_IO_HEADERS ) ;

}

/* EngineIoWebSocket */

@Override

public Map < String , String > getQuery ( ) {

return mQuery ;

}

@Override

public Map < String , List < String > > getConnectionHeaders ( ) {

return mHeaders ;

}

@Override

public void write ( String message ) throws IOException {

mSession . sendMessage ( new TextMessage ( message ) ) ;

}

@Override

public void write ( byte [ ] message ) throws IOException {

mSession . sendMessage ( new BinaryMessage ( message ) ) ;

}

@Override

public void close ( ) {

try {

mSession . close ( ) ;

} catch ( IOException ignore ) {

}

/* WebSocketHandler */

void afterConnectionClosed ( CloseStatus closeStatus ) {

emit ( "close" ) ;

}

void handleMessage ( WebSocketMessage < ? > message ) {

if ( message . getPayload ( ) instanceof String || message . getPayload ( ) instanceof byte [ ] ) {

emit ( "message" , ( Object ) message . getPayload ( ) ) ;

} else {

throw new RuntimeException ( String . format (

"Invalid message type received: %s. Expected String or byte[]." ,

message . getPayload ( ) . getClass ( ) . getName ( ) ) ) ;

}

void handleTransportError ( Throwable exception ) {

emit ( "error" , "write error" , exception . getMessage ( ) ) ;

}

Client

Docs: https://socket.io/docs/v4/
CDN: https://cdn.socket.io/4.4.1/socket.io.js

index.html

<span class="token doctype"><span class="token punctuation">&lt;!</span> <span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span> <span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> html</span> <span class="token attr-name">lang</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> en <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> head</span> <span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> meta</span> <span class="token attr-name">charset</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> UTF-8 <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> title</span> <span class="token punctuation">&gt;</span></span> Socket io client <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> title</span> <span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> script</span> <span class="token attr-name">src</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> https://cdn.socket.io/4.4.1/socket.io.min.js <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> script</span> <span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> head</span> <span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> body</span> <span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> script</span> <span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">

    <span class="token keyword">const</span> socket <span class="token operator">=</span> <span class="token function">io</span> <span class="token punctuation">(</span> <span class="token string">'/mynamespace'</span> <span class="token punctuation">)</span>

    socket <span class="token punctuation">.</span> <span class="token function">on</span> <span class="token punctuation">(</span> <span class="token string">'hello'</span> <span class="token punctuation">,</span> <span class="token punctuation">(</span> <span class="token parameter">arg</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'connected'</span> <span class="token punctuation">,</span> arg <span class="token punctuation">)</span>
    <span class="token punctuation">}</span> <span class="token punctuation">)</span>

    socket <span class="token punctuation">.</span> <span class="token function">on</span> <span class="token punctuation">(</span> <span class="token string">'disconnect'</span> <span class="token punctuation">,</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'disconnect'</span> <span class="token punctuation">,</span> socket <span class="token punctuation">.</span> id <span class="token punctuation">)</span> <span class="token comment">// undefined</span>
    <span class="token punctuation">}</span> <span class="token punctuation">)</span>

    <span class="token keyword">function</span> <span class="token function">submit</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> txt <span class="token operator">=</span> document <span class="token punctuation">.</span> <span class="token function">getElementById</span> <span class="token punctuation">(</span> <span class="token string">'input'</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> value
        socket <span class="token punctuation">.</span> <span class="token function">emit</span> <span class="token punctuation">(</span> <span class="token string">'message'</span> <span class="token punctuation">,</span> txt <span class="token punctuation">)</span>
    <span class="token punctuation">}</span>

</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> script</span> <span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> input</span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> input <span class="token punctuation">"</span></span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> text <span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> button</span> <span class="token special-attr"><span class="token attr-name">onclick</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> <span class="token value javascript language-javascript"><span class="token function">submit</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span></span> <span class="token punctuation">"</span></span></span> <span class="token punctuation">&gt;</span></span> Submit <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> button</span> <span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> body</span> <span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> html</span> <span class="token punctuation">&gt;</span></span>

<! DOCTYPE html >

< html lang = " en " >

< head >

< meta charset = " UTF-8 " >

< title > Socket io client </ title >

< script src = " https://cdn.socket.io/4.4.1/socket.io.min.js " > </ script >

</ head >

< body >

< script >

const socket = io ( '/mynamespace' )

socket . on ( 'hello' , ( arg ) => {

console . log ( 'connected' , arg )

} )

socket . on ( 'disconnect' , ( ) => {

console . log ( 'disconnect' , socket . id ) // undefined

} )

function submit ( ) {

const txt = document . getElementById ( 'input' ) . value

socket . emit ( 'message' , txt )

}

</ script >

< input id = " input " type = " text " />

< button onclick = " submit ( ) " > Submit </ button >

</ body >

</ html >

And here is the result.

Quick, isn’t it, if you have any questions plz leave comments. Thank you.

Share the news now

Source : Viblo

Setup project Spring boot 2.x + Socket.io Client 4.x

TikTok becomes the second largest social platform in South Africa

The fastest depreciating after 9 months of launch, iPhone 14 Pro Max continues to break the bottom in Vietnam

Beginner's guide to R: Introduction

10 essential SublimeText plugins for JavaScript developers