当前位置： 移动技术网 > IT编程>网页制作>Html5 > SpringMvc + socket.io + vue + vue-socket.io实例

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

2019年03月21日  | 移动技术网IT编程  | 我要评论

浮萍居主,柳树的作用,城市街头足球汉化

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:

 

服务端截图:

 

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网