欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

SpringMvc + socket.io + vue + vue-socket.io实例

程序员文章站 2022-03-13 09:24:35
SpringMvc部分实现 1. 所需依赖 com.corundumstudio.socketio netty-socketio 1.7.7
springmvc部分实现
 1. 所需依赖
<dependency>
          <groupid>com.corundumstudio.socketio</groupid>
          <artifactid>netty-socketio</artifactid>
          <version>1.7.7</version>
</dependency>

其他相关依赖

<dependency>
    <groupid>com.fasterxml.jackson.core</groupid>
    <artifactid>jackson-core</artifactid>
    <version>2.9.6</version>
</dependency>
        
<dependency>
    <groupid>org.slf4j</groupid>
    <artifactid>slf4j-api</artifactid>
    <version>${slf4j.version}</version>
</dependency>
<dependency>
    <groupid>org.slf4j</groupid>
    <artifactid>log4j-over-slf4j</artifactid>
    <version>${slf4j.version}</version>
</dependency>

2. 服务端类实现 (socketio.java)

import java.util.map;

import org.springframework.context.applicationlistener;
import org.springframework.context.event.contextrefreshedevent;
import org.springframework.stereotype.component;

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.connectlistener;
import com.corundumstudio.socketio.listener.datalistener;
import com.corundumstudio.socketio.listener.disconnectlistener;

@component("socketio")
public class socketio implements applicationlistener<contextrefreshedevent> {

    public void onapplicationevent(contextrefreshedevent arg0) {

        new thread(new runnable() {
            
            public void run() {
                // todo auto-generated method stub
                socketstart();
            }
        }).start();
    }
    
    private void socketstart() {
        system.out.println("in socketio");
        
        // todo auto-generated method stub
        configuration config = new configuration();
        config.sethostname("127.0.0.1");
        
        config.setport(9092);
        config.setmaxframepayloadlength(1024 * 1024);
        config.setmaxhttpcontentlength(1024 * 1024);
        socketioserver server = new socketioserver(config);
        
        server.addconnectlistener(new connectlistener() {
            
            public void onconnect(socketioclient client) {
                // todo auto-generated method stub
                string clientinfo = client.getremoteaddress().tostring();
                string clientip = clientinfo.substring(1,clientinfo.indexof(":"));//获取ip
                
                client.sendevent("cliented", "ip: " + clientip);
            }
        });
        
        server.adddisconnectlistener(new disconnectlistener() {
            
            public void ondisconnect(socketioclient client) {
                string clientinfo = client.getremoteaddress().tostring();
                string clientip = clientinfo.substring(1,clientinfo.indexof(":"));//获取ip
                
                client.sendevent("disconned", "ip: " + clientip);
                
            }
        });
        
        server.addeventlistener("msginfo", string.class, new datalistener<string>() {

            public void ondata(socketioclient client, string data, ackrequest arg2) throws exception {
                // todo auto-generated method stub
                string clientinfo = client.getremoteaddress().tostring();
                string clientip = clientinfo.substring(1, clientinfo.indexof(":"));
                system.out.println(clientip+":客户端:************"+data);
                
                client.sendevent("msginfo", "服务端返回信息!");
            }
        });
        
        server.start();
        try {
            thread.sleep(integer.max_value) ;
        } catch (interruptedexception e) {
            // todo auto-generated catch block
            e.printstacktrace();
        }
        server.stop();
    }
}

将该类添加到 xml 配置文件,让它容器启动后执行;

<bean id="socketio" class="com.spring.getinfo.utils.socketio"></bean>

运行 springmvc

vue端实现

 1. vue 环境安装;

     a. 安装node.js(https://nodejs.org/en/)

         选择 current

      b. 设置相关参数:   (node_home, path等)

      c. 安装 cnpm

          npm install -g cnpm --registry=https://registry.npm.taobao.org

      d. 安装 vue

          cnpm install vue -g 

      e. vue-cli 脚手架

         cnpm install vue-cli -g

 2. 创建 vue 项目

      vue init webpack-simple vueproj

      >cd vueproj 进入 vueproj项目目录

      >cnpm install 生成 node_modules 等相关目录及文件

3. 引入 vue-socket.io 

    npm install vue-socket.io --save

    使用 /src/main.js

import vuesocketio from 'vue-socket.io'

vue.use(new vuesocketio({
    debug: true,
    connection: 'http://localhost:9092'
}));

在 /src/app.vue

<div>
    <input type="text" name="box" ref="box" />
    <input type="button" @click="clickbutton('user1')" value="button" />
    </div>

以及 脚本

export default {
  name: 'app',
  data () {
    return {
      msg: 'welcome to your vue.js app'
    }
  },
  sockets: {
        connect: function () {
            console.log('socket connected');
        //this.$socket.emit('login', 'socket connectedxxxx');
        },
        msginfo: function (data) {
            //console.log('this method was fired by the socket server. eg: io.emit("customemit", data)');
            console.log("client: " + data);
        },
    },
    methods: {
        clickbutton: function () {
        var msg = this.$refs.box.value;
        console.log(msg);

            this.$socket.emit('msginfo', msg);
        }
    }
}

使用 vue 运行端口 (项目目录 vueproj/package.json,添加红色部分)

"scripts": {
    "dev": "cross-env node_env=development webpack-dev-server --open --hot --port 9192",
    "build": "cross-env node_env=production webpack --progress --hide-modules"
  },

然后运行vue项目,在vueproj目录下(cmd窗口),执行 cnpm run dev;

scripts 下 connect是内置事件 (侦听连接服务端成功);msginfo为自定义事件,与 this.$socket.emit('msginfo', xxxxx) 对应;

截图:

窗口1:

SpringMvc + socket.io + vue + vue-socket.io实例

 

窗口2:

SpringMvc + socket.io + vue + vue-socket.io实例

 

服务端截图:

SpringMvc + socket.io + vue + vue-socket.io实例