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

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:

 

窗口2:

 

服务端截图: