修改排重的时间间隔

cloud-socket/src/applicationContext.xml

@@ -25,6 +25,10 @@
 		<property name="url" value="${url}" />
 		<property name="username" value="${username}" />
 		<property name="password" value="${password}" />
+		<property name="validationQuery" value="SELECT COUNT(*) FROM DUAL" />
+		<property name="testOnBorrow" value="true" />
+		<property name="testOnReturn" value="true" />
+		<property name="testWhileIdle" value="true" />
 	</bean>
 
 	<!-- (事务管理)transaction manager, use JtaTransactionManager for global tx -->
@@ -51,7 +55,7 @@
 <!-- 	//进行定时任务的类，将其定义为一个bean -->
     <bean id="myTask" class="com.js.kbt.task.MyTask"></bean>
     <task:scheduled-tasks>
-        <task:scheduled ref="myTask" method="doTask" fixed-rate="1200000" />
+        <task:scheduled ref="myTask" method="doTask" fixed-rate="600000" />
         <task:scheduled ref="myTask" method="reduceRecData" fixed-rate="86400000" />
     </task:scheduled-tasks>
   	<bean id="helloServer" class="com.js.kbt.socket.HelloServer" scope="singleton" init-method="startServer" destroy-method="shutdown"/>

cloud-socket/src/com/js/kbt/socket/CustomDecoder.java

@@ -25,7 +25,10 @@ public class CustomDecoder extends StringDecoder {
 	                .append(HEXES.charAt((b & 0x0F)));
 	    }
 	    logger.info("decode="+hex.toString());
+	    
 	    out.add(hex.toString());
 
 	}
+	
+	
 }

cloud-socket/src/com/js/kbt/socket/HelloServer.java

@@ -1,127 +1,128 @@
-package com.js.kbt.socket;
- 
-import io.netty.channel.ChannelFuture;
-import io.netty.channel.ChannelOption;
-import io.netty.channel.socket.nio.NioServerSocketChannel;
-
-import java.util.ArrayList;
-import java.util.HashMap;
-import java.util.List;
-
-import javax.annotation.Resource;
-
-import org.springframework.stereotype.Service;
- 
-@Service("helloServer")
-public class HelloServer {
-
-    @Resource(name="helloServerInitializer")
-    public HelloServerInitializer helloServerInitializer;
-    
-    @Resource(name="myServerBootstrap")
-    private MyServerBootstrap myServerBootstrap;
-    
-    @Resource(name="bossGroup")
-    private BossGroup bossGroup;
-    
-    @Resource(name="workerGroup")
-    private WorkerGroup workerGroup;
-    
-    public static boolean isStarted = false;
-    /*
-     * 创建服务端监听端口
-     */
-      
-    private static final int portNumber = 2019;
-    
-    public static HashMap<String, UserHandler> deviceMap = new HashMap<String, UserHandler>();
-    public static List<String> closePendingList = new ArrayList<String>();
-    public static final Object locker = new Object();
-    
-    public static int sendTCPCmd(String identity, String cmd) {
-    	if (deviceMap.containsKey(identity)) {
-    		deviceMap.get(identity).sendMsg(cmd);
-    		return 1;
-    	} else {
-    		org.apache.log4j.Logger.getLogger(UserHandler.class).info("设备未登录=="+identity+", all size="+deviceMap.size());
-    		return -1;
-    	}
-    }
-    
-    public void startServer() throws InterruptedException {
-    	System.out.println("@@@@@@@@@@startServer=======");
-    	if (isStarted) {
-    		return;
-    	}
-    	new Thread() {
-    		public void run() {
-    	        System.out.println("启动Game Server spring注入");  
-    	        try {
-    	        	myServerBootstrap.group(bossGroup, workerGroup);
-    	        	myServerBootstrap.channel(NioServerSocketChannel.class);
-    	        	myServerBootstrap.option(ChannelOption.TCP_NODELAY, true);
-    	        	myServerBootstrap.childHandler(helloServerInitializer)
-    	        	.childOption(ChannelOption.SO_KEEPALIVE, true)
-    	            .childOption(ChannelOption.SO_REUSEADDR, true);
-    	        	isStarted = true;
-    	            System.out.println("设置模式启动");
-    	            org.apache.log4j.Logger.getLogger(HelloServer.class).info("设置模式启动===Logger");
-    	        	//服务器绑定端口监听
-    	        	ChannelFuture channelFuture = myServerBootstrap.bind(portNumber).sync();
-    	        	
-    	            //监听服务器关闭监听
-    	            channelFuture.channel().closeFuture().sync();
-    	        } catch (InterruptedException e) {
-					e.printStackTrace();
-				}
-    		}
-    	}.start();
-    }
-    
-    /**
-     * 断开连接，如果尚未连接上，加入断开队列
-     * @param identity
-     */
-    public static void closeConnection(String identity) {
-    	synchronized (locker) {
-    		if (deviceMap.containsKey(identity)) {
-    			deviceMap.get(identity).sendMsg("CANCEL");
-        		deviceMap.get(identity).close();
-        	} else {
-        		closePendingList.add(identity);
-        	}
-		}
-    }
-    
-    /**
-     * 从取消列表中移除，保证该连接不会被断开
-     * @param identity
-     */
-    public static void activeDevice(String identity) {
-    	synchronized (locker) {
-    		if (closePendingList.contains(identity)) {
-    			closePendingList.remove(identity);
-    		}
-		}
-    }
-    
-    public void shutdown() {
-    	System.out.println("关闭Game Server");
-		workerGroup.shutdownGracefully();
-		bossGroup.shutdownGracefully();
-		deviceMap.clear();
-    }
-    
-    
-    public static void main(String[] args) throws InterruptedException {
-//    	HelloServer server = new HelloServer();
-//    	server.startServer();
-    	
-    	List<String> testList = new ArrayList<String>();
-    	testList.add("12345");
-    	System.out.println(testList.size());
-    	testList.remove("12345");
-    	System.out.println(testList.size());
-    }
-    
+package com.js.kbt.socket;
+ 
+import io.netty.channel.ChannelFuture;
+import io.netty.channel.ChannelOption;
+import io.netty.channel.socket.nio.NioServerSocketChannel;
+
+import java.util.ArrayList;
+import java.util.HashMap;
+import java.util.List;
+
+import javax.annotation.Resource;
+
+import org.springframework.stereotype.Service;
+ 
+@Service("helloServer")
+public class HelloServer {
+
+    @Resource(name="helloServerInitializer")
+    public HelloServerInitializer helloServerInitializer;
+    
+    @Resource(name="myServerBootstrap")
+    private MyServerBootstrap myServerBootstrap;
+    
+    @Resource(name="bossGroup")
+    private BossGroup bossGroup;
+    
+    @Resource(name="workerGroup")
+    private WorkerGroup workerGroup;
+    
+    public static boolean isStarted = false;
+    /*
+     * 创建服务端监听端口
+     */
+      
+    private static final int portNumber = 2019;
+    
+    public static HashMap<String, UserHandler> deviceMap = new HashMap<String, UserHandler>();
+    public static List<String> closePendingList = new ArrayList<String>();
+    public static final Object locker = new Object();
+    
+    public static int sendTCPCmd(String identity, String cmd) {
+    	if (deviceMap.containsKey(identity)) {
+    		deviceMap.get(identity).sendMsg(cmd);
+    		return 1;
+    	} else {
+    		org.apache.log4j.Logger.getLogger(UserHandler.class).info("设备未登录=="+identity+", all size="+deviceMap.size());
+    		return -1;
+    	}
+    }
+    
+    public void startServer() throws InterruptedException {
+    	System.out.println("@@@@@@@@@@startServer=======");
+    	if (isStarted) {
+    		return;
+    	}
+    	new Thread() {
+    		public void run() {
+    	        System.out.println("启动Game Server spring注入");  
+    	        try {
+    	        	myServerBootstrap.group(bossGroup, workerGroup);
+    	        	myServerBootstrap.channel(NioServerSocketChannel.class);
+    	        	myServerBootstrap.option(ChannelOption.TCP_NODELAY, true);
+    	        	myServerBootstrap.childHandler(helloServerInitializer)
+    	        	.childOption(ChannelOption.SO_RCVBUF, 1048576*20)
+    	        	.childOption(ChannelOption.SO_KEEPALIVE, true)
+    	            .childOption(ChannelOption.SO_REUSEADDR, true);
+    	        	isStarted = true;
+    	            System.out.println("设置模式启动");
+    	            org.apache.log4j.Logger.getLogger(HelloServer.class).info("设置模式启动===Logger");
+    	        	//服务器绑定端口监听
+    	        	ChannelFuture channelFuture = myServerBootstrap.bind(portNumber).sync();
+    	        	
+    	            //监听服务器关闭监听
+    	            channelFuture.channel().closeFuture().sync();
+    	        } catch (InterruptedException e) {
+					e.printStackTrace();
+				}
+    		}
+    	}.start();
+    }
+    
+    /**
+     * 断开连接，如果尚未连接上，加入断开队列
+     * @param identity
+     */
+    public static void closeConnection(String identity) {
+    	synchronized (locker) {
+    		if (deviceMap.containsKey(identity)) {
+    			deviceMap.get(identity).sendMsg("CANCEL");
+        		deviceMap.get(identity).close();
+        	} else {
+        		closePendingList.add(identity);
+        	}
+		}
+    }
+    
+    /**
+     * 从取消列表中移除，保证该连接不会被断开
+     * @param identity
+     */
+    public static void activeDevice(String identity) {
+    	synchronized (locker) {
+    		if (closePendingList.contains(identity)) {
+    			closePendingList.remove(identity);
+    		}
+		}
+    }
+    
+    public void shutdown() {
+    	System.out.println("关闭Game Server");
+		workerGroup.shutdownGracefully();
+		bossGroup.shutdownGracefully();
+		deviceMap.clear();
+    }
+    
+    
+    public static void main(String[] args) throws InterruptedException {
+//    	HelloServer server = new HelloServer();
+//    	server.startServer();
+    	
+    	List<String> testList = new ArrayList<String>();
+    	testList.add("12345");
+    	System.out.println(testList.size());
+    	testList.remove("12345");
+    	System.out.println(testList.size());
+    }
+    
 }

cloud-socket/src/com/js/kbt/socket/HelloServerInitializer.java

@@ -1,16 +1,21 @@
 package com.js.kbt.socket;
  
-import io.netty.channel.ChannelHandlerContext;
-import io.netty.channel.ChannelInitializer;
-import io.netty.channel.ChannelPipeline;
-import io.netty.channel.socket.SocketChannel;
-import io.netty.handler.codec.string.StringDecoder;
 import java.nio.charset.Charset;
+
 import javax.annotation.Resource;
 
 import org.apache.log4j.Logger;
 import org.springframework.context.ApplicationContext;
 import org.springframework.stereotype.Service;
+
+import io.netty.buffer.ByteBuf;
+import io.netty.buffer.Unpooled;
+import io.netty.channel.ChannelHandlerContext;
+import io.netty.channel.ChannelInitializer;
+import io.netty.channel.ChannelPipeline;
+import io.netty.channel.socket.SocketChannel;
+import io.netty.handler.codec.DelimiterBasedFrameDecoder;
+import io.netty.handler.codec.string.StringDecoder;
 @Service("helloServerInitializer")
 public class HelloServerInitializer extends ChannelInitializer<SocketChannel> {
 	
@@ -38,13 +43,13 @@ public class HelloServerInitializer extends ChannelInitializer<SocketChannel> {
 //        channelPipeline.addLast(new IdleStateHandler(READ_IDEL_TIME_OUT,
 //				WRITE_IDEL_TIME_OUT, ALL_IDEL_TIME_OUT, TimeUnit.SECONDS)); // 1
 //        channelPipeline.addLast(new HeartbeatServerHandler());
-//        ByteBuf delimiter = Unpooled.copiedBuffer("&_".getBytes());
+//        ByteBuf delimiter = Unpooled.copiedBuffer("!@".getBytes());//21 40
 //        channelPipeline.addLast("idleStateHandler", new IdleStateHandler(READ_IDEL_TIME_OUT, WRITE_IDEL_TIME_OUT,ALL_IDEL_TIME_OUT));
-//        channelPipeline.addLast( new DelimiterBasedFrameDecoder(2048, delimiter));
+//        channelPipeline.addLast(new DelimiterBasedFrameDecoder(409600, delimiter));
         //为通道添加功能
         //字符串解码  编码
-//        channelPipeline.addLast("frameDecoder", new LengthFieldBasedFrameDecoder(Integer.MAX_VALUE, 0, 4, 0, 4));
-//        channelPipeline.addLast("frameEncoder", new LengthFieldPrepender(4));
+//        channelPipeline.addLast("frameDecoder", new MyProtocolDecoder(Integer.MAX_VALUE,2,2,0,0, true));
+//        channelPipeline.addLast("frameEncoder", new LengthFieldPrepender(2));
 		
         channelPipeline.addLast("decoder",new CustomDecoder());
         channelPipeline.addLast("encoder", new StringDecoder(Charset.forName("UTF-8")));

cloud-socket/src/com/js/kbt/socket/MyProtocolBean.java

@@ -0,0 +1,64 @@
+package com.js.kbt.socket;
+
+public class MyProtocolBean {
+    //类型  系统编号 0xA 表示A系统，0xB 表示B系统
+    private byte type;
+
+    //信息标志  0xA 表示心跳包    0xC 表示超时包  0xC 业务信息包
+    private byte flag;
+
+    //内容长度
+    private int length;
+
+    //内容
+    private String content;
+
+    public byte getType() {
+        return type;
+    }
+
+    public void setType(byte type) {
+        this.type = type;
+    }
+
+    public byte getFlag() {
+        return flag;
+    }
+
+    public void setFlag(byte flag) {
+        this.flag = flag;
+    }
+
+    public int getLength() {
+        return length;
+    }
+
+    public void setLength(int length) {
+        this.length = length;
+    }
+
+    public String getContent() {
+        return content;
+    }
+
+    public void setContent(String content) {
+        this.content = content;
+    }
+
+    public MyProtocolBean(byte flag, byte type, int length, String content) {
+        this.flag = flag;
+        this.type = type;
+        this.length = length;
+        this.content = content;
+    }
+
+    @Override
+    public String toString() {
+        return "MyProtocolBean{" +
+                "type=" + type +
+                ", flag=" + flag +
+                ", length=" + length +
+                ", content='" + content + '\'' +
+                '}';
+    }
+}

cloud-socket/src/com/js/kbt/socket/MyProtocolDecoder.java

@@ -0,0 +1,76 @@
+package com.js.kbt.socket;
+
+import java.nio.ByteOrder;
+import java.nio.charset.Charset;
+
+import io.netty.buffer.ByteBuf;
+import io.netty.channel.ChannelHandlerContext;
+import io.netty.handler.codec.DecoderException;
+import io.netty.handler.codec.LengthFieldBasedFrameDecoder;
+
+public class MyProtocolDecoder extends LengthFieldBasedFrameDecoder {
+	private static final String HEXES = "0123456789ABCDEF";
+    private static final int HEADER_SIZE = 4;
+
+    /**
+     *
+     * @param maxFrameLength  帧的最大长度
+     * @param lengthFieldOffset length字段偏移的地址
+     * @param lengthFieldLength length字段所占的字节长
+     * @param lengthAdjustment 修改帧数据长度字段中定义的值，可以为负数 因为有时候我们习惯把头部记入长度,若为负数,则说明要推后多少个字段
+     * @param initialBytesToStrip 解析时候跳过多少个长度
+     * @param failFast 为true，当frame长度超过maxFrameLength时立即报TooLongFrameException异常，为false，读取完整个帧再报异
+     */
+
+    public MyProtocolDecoder(int maxFrameLength, int lengthFieldOffset, int lengthFieldLength, int lengthAdjustment, int initialBytesToStrip, boolean failFast) {
+
+        super(maxFrameLength, lengthFieldOffset, lengthFieldLength, lengthAdjustment, initialBytesToStrip, failFast);
+
+    }
+   
+    protected long getUnadjustedFrameLength(ByteBuf buf, int offset, int length, ByteOrder order) {
+            buf = buf.order(order);
+            long frameLength;
+            byte b1 = buf.getByte(offset);
+            byte b2 = buf.getByte(offset + 1);
+            StringBuilder hex = new StringBuilder();
+            String s1 = hex.append(HEXES.charAt((b2 & 0xF0) >> 4)).append(HEXES.charAt((b2 & 0x0F)))
+            		.append(HEXES.charAt((b1 & 0xF0) >> 4)).append(HEXES.charAt((b1 & 0x0F))).toString();
+            frameLength = Integer.parseInt(s1, 16) - 4;//去掉头部的FAAF0000四位
+            System.out.println("getUnadjustedFrameLength解析长度："+frameLength);
+            return frameLength;
+        }
+    @Override
+    protected Object decode(ChannelHandlerContext ctx, ByteBuf in) throws Exception {
+    	System.out.println("解析长度decode：");
+        //在这里调用父类的方法,实现指得到想要的部分,我在这里全部都要,也可以只要body部分
+        in = (ByteBuf) super.decode(ctx,in);  
+
+        if(in == null){
+            return null;
+        }
+        if(in.readableBytes()<HEADER_SIZE){
+            throw new Exception("字节数不足");
+        }
+//        byte fa = in.readByte();
+//        byte af = in.readByte();
+        
+//        byte b1 = in.readByte();
+//        byte b2 = in.readByte();
+//        //读取length字段
+//        StringBuilder hex = new StringBuilder();
+//        String s1 = hex.append(HEXES.charAt((b2 & 0xF0) >> 4)).append(HEXES.charAt((b2 & 0x0F)))
+//        		.append(HEXES.charAt((b1 & 0xF0) >> 4)).append(HEXES.charAt((b1 & 0x0F))).toString();
+//        
+//        int length = Integer.parseInt(s1, 16);
+//        System.out.println("解析长度："+length);
+//        if(in.readableBytes()!=length){
+//            throw new Exception("标记的长度不符合实际长度");
+//        }
+        //读取body
+        byte []bytes = new byte[in.readableBytes()];
+        in.readBytes(bytes);
+
+        return bytes;
+    }
+}

cloud-socket/src/jdbc.properties

@@ -1,9 +1,13 @@
 classPath=D:/mysql-connector-java-5.1.31-bin.jar
 #classPath=D:/workspace/yunsu/cloud-socket/WebContent/WEB-INF/lib/mysql-connector-java-5.1.31-bin.jar
 driver=com.mysql.jdbc.Driver
-url=jdbc:mysql://47.100.37.243:7644/cloud_mould?autoReconnect=true&rewriteBatchedStatements=TRUE&zeroDateTimeBehavior=convertToNull&useUnicode=true&characterEncoding=UTF-8
+#url=jdbc:mysql://47.100.37.243:7644/cloud_mould?autoReconnect=true&rewriteBatchedStatements=TRUE&zeroDateTimeBehavior=convertToNull&useUnicode=true&characterEncoding=UTF-8
+#username=root
+#password=Ziyu1026!@
+url=jdbc:mysql://127.0.0.1:3306/cloud_mould?autoReconnect=true&rewriteBatchedStatements=TRUE&zeroDateTimeBehavior=convertToNull&useUnicode=true&characterEncoding=UTF-8&failOverReadOnly=false
 username=root
-password=Ziyu1026!@
+password=p011430seya1026
 maxActive=255
 maxIdle=20
+minIdle=5
 maxWait=100

ys_int/index.html

@@ -1,123 +1,123 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <meta charset="utf-8">
-        <title>云塑网后台管理系统</title>
-        <link rel="shortcut icon" type="image/x-icon" href="./cloud.ico" /> 
-        <!-- 高德地图 -->
-        <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=362cff852a3a37d328f9697352eebacd"></script>
-        <!-- 高德地图UI组件库 1.0 -->
-        <script src="//webapi.amap.com/ui/1.0/main.js"></script>
-        <style>
-            /* 地图弹窗样式 */
-            .window {
-                background: #fff;
-                padding: 0px 0px 10px;
-                border:1px solid silver;
-                border-radius: 5px;
-            }
-
-            .info-top {
-                position: relative;
-                background: none repeat scroll 0 0 #F9F9F9;
-                border-bottom: 1px solid #CCC;
-                border-radius: 5px 5px 0 0;
-            }
-
-            div.info-top div {
-                display: inline-block;
-                color: #333333;
-                font-size: 14px;
-                font-weight: bold;
-                line-height: 31px;
-                padding: 0 10px;
-            }
-
-            div.info-top div span {
-                font-size:11px;
-                color:#F00;
-            }
-
-            div.info-top i {
-                position: absolute;
-                top: 10px;
-                right: 10px;
-                transition-duration: 0.25s;
-                cursor: pointer;
-            }
-
-            div.info-middle {
-                font-size: 12px;
-                padding: 10px 6px;
-                line-height: 20px;
-                background-color: #fff;
-            }
-
-            div.info-item {
-                width: 300px;
-                height: 30px;
-                line-height: 30px;
-                padding:0 8px;
-            }
-
-            div.info-item a {
-                color: #20a0ff;
-                cursor: pointer;
-            }
-
-            span.info-state {
-                float:right;
-            }
-
-            span.info-ball {
-                display: inline-block;
-                width:10px;
-                height:10px;
-                border-radius: 50%;
-                margin-right: 10px;
-                line-height: 30px;
-            }
-            
-            .customWidth {
-                width: 675px!important;
-            }
-
-            .activeNames .el-collapse-item__wrap {
-                border-bottom: none; 
-            }
-
-            /* 滚动条样式修改 */
-            /*滚动条凹槽的颜色，还可以设置边框属性 */
-            ::-webkit-scrollbar-track-piece {
-                background-color:#f8f8f8;
-                -webkit-border-radius: 2em;
-                -moz-border-radius: 2em;
-                border-radius: 2em;
-            }
-            /*滚动条的宽度*/
-            ::-webkit-scrollbar {
-                width:9px;
-            height: 9px;}
-            /*滚动条的设置*/
-            ::-webkit-scrollbar-thumb {
-                background-color:#dddddd;
-                background-clip:padding-box;
-                -webkit-border-radius: 2em;
-                -moz-border-radius: 2em;
-                border-radius: 2em;}
-
-            /*滚动条鼠标移上去*/
-            ::-webkit-scrollbar-thumb:hover {
-                background-color:#bbb;
-            }
-
-            /*取消消息列表弹出框的内边距*/
-            .popover-self {
-                padding: 0 !important;
-            }    
-        </style>
-    </head>
-    <body>
-        <div id="app"></div>
-    </body>
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>云塑网后台管理系统</title>
+        <link rel="shortcut icon" type="image/x-icon" href="./cloud.ico" /> 
+        <!-- 高德地图 -->
+        <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=362cff852a3a37d328f9697352eebacd"></script>
+        <!-- 高德地图UI组件库 1.0 -->
+        <script src="//webapi.amap.com/ui/1.0/main.js"></script>
+        <style>
+            /* 地图弹窗样式 */
+            .window {
+                background: #fff;
+                padding: 0px 0px 10px;
+                border:1px solid silver;
+                border-radius: 5px;
+            }
+
+            .info-top {
+                position: relative;
+                background: none repeat scroll 0 0 #F9F9F9;
+                border-bottom: 1px solid #CCC;
+                border-radius: 5px 5px 0 0;
+            }
+
+            div.info-top div {
+                display: inline-block;
+                color: #333333;
+                font-size: 14px;
+                font-weight: bold;
+                line-height: 31px;
+                padding: 0 10px;
+            }
+
+            div.info-top div span {
+                font-size:11px;
+                color:#F00;
+            }
+
+            div.info-top i {
+                position: absolute;
+                top: 10px;
+                right: 10px;
+                transition-duration: 0.25s;
+                cursor: pointer;
+            }
+
+            div.info-middle {
+                font-size: 12px;
+                padding: 10px 6px;
+                line-height: 20px;
+                background-color: #fff;
+            }
+
+            div.info-item {
+                width: 300px;
+                height: 30px;
+                line-height: 30px;
+                padding:0 8px;
+            }
+
+            div.info-item a {
+                color: #20a0ff;
+                cursor: pointer;
+            }
+
+            span.info-state {
+                float:right;
+            }
+
+            span.info-ball {
+                display: inline-block;
+                width:10px;
+                height:10px;
+                border-radius: 50%;
+                margin-right: 10px;
+                line-height: 30px;
+            }
+            
+            .customWidth {
+                width: 675px!important;
+            }
+
+            .activeNames .el-collapse-item__wrap {
+                border-bottom: none; 
+            }
+
+            /* 滚动条样式修改 */
+            /*滚动条凹槽的颜色，还可以设置边框属性 */
+            ::-webkit-scrollbar-track-piece {
+                background-color:#f8f8f8;
+                -webkit-border-radius: 2em;
+                -moz-border-radius: 2em;
+                border-radius: 2em;
+            }
+            /*滚动条的宽度*/
+            ::-webkit-scrollbar {
+                width:9px;
+            height: 9px;}
+            /*滚动条的设置*/
+            ::-webkit-scrollbar-thumb {
+                background-color:#dddddd;
+                background-clip:padding-box;
+                -webkit-border-radius: 2em;
+                -moz-border-radius: 2em;
+                border-radius: 2em;}
+
+            /*滚动条鼠标移上去*/
+            ::-webkit-scrollbar-thumb:hover {
+                background-color:#bbb;
+            }
+
+            /*取消消息列表弹出框的内边距*/
+            .popover-self {
+                padding: 0 !important;
+            }    
+        </style>
+    </head>
+    <body>
+        <div id="app"></div>
+    </body>
 </html>