文档章节

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

o
 osc_y8yehimr
发布于 2019/03/20 11:33
字数 584
阅读 34
收藏 0

精选30+云产品,助力企业轻松上云!>>>

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:

 

服务端截图:

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
vue-socket.io使用教程与踩坑记录

全手打原创,转载请标明出处:https://www.cnblogs.com/dreamsqin/p/12018866.html,多谢,=。=~(如果对你有帮助的话请帮我点个赞啦) 请先允许我狠狠吐个槽:vue-socket.io相关中文博客实在...

osc_agn9pfb0
04/16
13
0
Vue.js 如何使用 Socket.IO ?

在很多需求业务中,都需要浏览器和服务器实时通信来实现功能,比如:扫码登录(扫码后,手机确认登录,PC网页完成登录并跳转)、订单语言提醒等,这些都是建立在两端实时通信的基础上的。对前端...

向建峰_Javan
2019/07/26
1.9K
0
vue中,使用websocket->vue-socket.io

https://github.com/MetinSeylan/Vue-Socket.io 前端 1、npm install vue-socket.io --save 2、在main.js编写,引入vue-socket 3、在组件中编写 后端,node.js实现 socket实现部分代码,参见...

飞向月球8
2019/01/13
1K
0
socket应用(vue、node.js、M站)

socket应用(vue、node.js、M站) 前言:我们在做一些项目的时候需要做到实时变化, 比如我们有时候有需求会要求我们做一个类似于聊天室的页面 比如有些时候我们对某些东西进行点赞和刷票,需要...

osc_7zyqbo9l
2019/02/28
8
0
smallwhite/voteapp

交互式投票 App 练手Vue 和 Socket.io 写的一个投票App 特点 投票结果实时反馈。 无需登录注册。 可以重新投票。 可以查看投票列表。 可以选择在投票列表中隐藏。 投票可以填写备注 可以设置...

smallwhite
2018/07/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

科技人文丨玻璃心:承受阈值与表达

大家好,我是SKODE。 有趣的灵魂,聊科技人文。 本系列博客地址:传送门 本文转载自B站:安慰记传送门 玻璃心是网络用语,意思是: 对负面事件的接受度很低 还有对别人可能给出的负面评价非常...

osc_u9mt0sus
55分钟前
20
0
迅睿CMS 游客不允许上传附件

游客不允许上传附件 迅睿CMS系统:https://www.xunruicms.com/ 本文档原文地址:https://www.xunruicms.com/doc/752.html...

迅睿CMS-PHP开源CMS程序
56分钟前
12
0
代理,注解,接口和实现类的小测验

* retention : 保留* policy : 策略 ps : 简单测试了一下手写代理,jdk动态代理,和cglib动态代理,根据其不同的结果分析其原理 一:测试目的 主要想看一下不同的代理模式对于目标类中方法上注...

岁一
56分钟前
12
0
V-Ray 5 For 3ds Max 正式发布:超越渲染 - 知乎

15个新功能,V-Ray5助你时间更节省,渲染更出色! 作者:ChaosGroup VRay 5 For 3ds Max 已正式发布! 2分钟视频,抢先预览新功能↓ 知乎视频 www.zhihu.com V-Ray 5 for 3ds Max 新增功能 ...

osc_o9u1um45
56分钟前
0
0
毕业的笑容和悲伤永远是校园的回忆

校园的风轻轻的拂过我的脸庞,风儿显得更加凉爽, 开满火红的凤凰树,染遍了校园的每个角落, 晚上那枝头蝉儿的竞相鸣奏,唱满了令人不舍的毕业歌, 它们彷彿告诉了我们要毕业了。 毕业典礼那...

瑾123
57分钟前
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部