egg-socket-io的demo案例

序：

demo主要是演示egg 利用egg-socket-io 这个插件和html静态页面建立长链接通讯

你先看下面几点，确定是你要的在去下载，

1、egg是2.15.1版本，因为是demo所以里面没有其他乱七八糟的依赖。

2、html你点那个 jquery版本.html（双击html文件就可以打开，不用起什么前端服务）

3、谁建立的连接，哪个html客户端建立的连接就只退给他，（我那边有备注另一行代码，你要推个人还是全部，可以直接实验）

4、vue-socket.io的 连接，我会在本文尾部另外附上教程，看完demo 想搞vue的 可以去文章尾巴看。

demo下载地址  ====》 egg-socket-io的demo案例

egg-socket-io

安装步骤

1、目录两个egg、html

2、进入egg目录 更新依赖和运行

cnpm install
cnpm run dev

3、打开html 双击jquery版本.html  浏览器打开

4、直接点击开始连接，

绿色代表连接后端服务成功了，这里注意，是闲运行  egg在来建立连接

5、发送内容

你随便填，如果成了，右侧就会出来服务器的回复了。

demo下载地址  ====》 egg-socket-io的demo案例

上面的demo演示到此结束。

来来，好学的小朋友给你们扩展下 vue-socket.io的配置方法

1、先更新依赖

cnpm install vue-socket.io

2、main.js 加入以下代码

import VueSocketIO from 'vue-socket.io'
Vue.use(new VueSocketIO({
    debug: true,
    // 服务器端地址
    connection: 'http://localhost:7001/',
    vuex: {
    }
}))

debug我建议你bulid的时候给他改成false，不然console控制台那边会给你打印出来。

3、App.vue的文件代码如下，不知道app.vue、main.js 文件在哪里的小朋友，看到没有，文章下面有一个打赏按钮，打赏完去面壁！！！！

<template>
  <div id="app">
	  
    <router-view/>
  </div>
</template>
<script>
export default{
    data() {
        return {
            messages: []
        }
    },
    sockets: {
		//连接成功
        connect: function() {
			let m=this;
			console.log('socket连接成功')
			m.setWS(); //这里我们  是主动发送信息到服务器， 
        },
        // server是接受后端发来的推送，名字自定义的。配合eggjs演示所以我这边就 是server
        server: function(res) {
			debugger
          alert("接受到后台消息"+res)
        },
    },
    methods: {
		//这边是主动发送消息到服务器
        setWS(){
            // 用户点击，提交用户输入
            this.$socket.emit('server', "ssssss") //sss就是你要发的信息了，
        }
    }
    
}
</script>
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height:calc(100vh);
}

</style>

这里注意  sockets和data、methods是平级的 ，注意。