摘要: 组合模式说明 组合模式用于简单化,一致化对单组件和复合组件的使用;其实它就是一棵树; 这棵树有且只有一个根,访问入口,如果它不是一棵空树,那么由一个或几个树枝节点以及子叶节点组成,每个树枝节点还包含自己的子树枝以及子叶节点; 在面向对象编程中,叶子以及复杂对象(树枝节点)都继承一个接口或抽象类分别实 阅读全文
posted @ 2015-01-28 14:22 Weiseditor 阅读(1866) 评论(1) 推荐(4) 编辑
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:

 

服务端截图:

 

posted @ 2019-03-20 11:33 Weiseditor 阅读(3486) 评论(0) 推荐(1) 编辑
摘要: 模式定义: [定义]: 将一个请求封装成一个对象,使得你用不同的请求把客户端参数化,对请求排队或者记录请求日志,可以提供命令的撤销和恢复功能。 组成: 调用者(Invoker),命令请求(Command,包括接口或抽象,以及实现,待对象化),接收者(实现者 Receiver,包括抽象接口,及实现), 阅读全文
posted @ 2019-03-07 00:16 Weiseditor 阅读(241) 评论(0) 推荐(1) 编辑
摘要: 责任链模式:定义 责任链接模式又称职责链模式,是一种对象的行为模式;它是一种链式结构,每个节点都有可能两种操作,要么处理该请求停止该请求操作,要么把请求转发到下一个节点,让下一个节点来处理请求;该模式定义了一些可能的处理请求的节点对象,请求的起点跟顺序都可能不一样,处理的节点根据请求的不一样而不同; 阅读全文
posted @ 2016-07-18 09:19 Weiseditor 阅读(3524) 评论(1) 推荐(3) 编辑
摘要: 迭代子模式:定义 迭代子模式,又称游标模式,是一种用于对聚集进行顺序访问规则的模式,是一种行为模式;它用于提供对聚集对象的一种统一的访问接口,使客户能够在不了解聚集对象内部结构的情况对聚集对象进行访问。它涉及两个部分,一个是聚集对象,一个迭代子对象,迭代对象(Iterator)用于提供访问聚集对象的 阅读全文
posted @ 2016-07-16 14:10 Weiseditor 阅读(548) 评论(0) 推荐(0) 编辑
摘要: 观察者模式:定议定义对象间的一种一对多的关系,当一个对象状态改变时 (一般称为被观察者),依赖于该对象的对象被通知,并更新;观察者模式:说明1. 观察者模式是行为模式,也被称为:发布-订阅模式、模型-视图模式、源-监听器模式、从属者模;2. 面对象过程中观察者模式的组成: 1>. 抽象主题角色:这... 阅读全文
posted @ 2015-09-06 17:30 Weiseditor 阅读(778) 评论(0) 推荐(0) 编辑
摘要: 模板方法模式说明定义:定义方法操作的骨架,把一些具体实现延伸到子类中去,使用得具体实现不会影响到骨架的行为步骤!说明:模式方法模式是一个继承跟复用的典型模式,该模式定义了一个抽象类,Abstract Class,其下定义了一个或多个模板方法,也就是顶级方法,这些方法定义行为的调度步骤,一般是调用抽象... 阅读全文
posted @ 2015-02-05 11:52 Weiseditor 阅读(769) 评论(0) 推荐(0) 编辑
摘要: 策略模式说明定义: 封装一系列的算法,使得他们之间可以相互替换,本模式使用算法独立于使用它的客户的变化。说明:策略模式,是一种组织算法的模式,核心不在于算法,而在于组织一系列的算法,并且如何去使用它;策略模式作用在于,行为实现的不可预见,面对这样的一种变化,我们得思考如何使用程序好维跟扩展,并使得客... 阅读全文
posted @ 2015-02-04 16:38 Weiseditor 阅读(838) 评论(0) 推荐(4) 编辑
摘要: 享元模式说明定义:用于解决一个系统大量细粒度对象的共享问题:关健词:分离跟共享;说明: 享元模式分单纯(共享)享元模式,以及组合(不共享)享元模式,有共享跟不共享之分;单纯享元模式,只包含共享的状态,可共享状态是不可变,不可修改的,这是享元的内部状态;当然有外部状态就有外部状态,外部状态是可变的,不... 阅读全文
posted @ 2015-02-03 18:27 Weiseditor 阅读(929) 评论(1) 推荐(0) 编辑
摘要: MultiZMap修改说明MultiZMap 是基于百度地图API 封装的一些常用功能类库;主要以prototype方式实现;并且实现了一些辅助的功能,比如添加 Marker 功能,事件管理等;以前版本:http://www.cnblogs.com/editor/category/591379.ht... 阅读全文
posted @ 2015-01-20 11:10 Weiseditor 阅读(485) 评论(0) 推荐(0) 编辑
点击右上角即可分享
微信分享提示