SpringMvc + socket.io + vue + vue-socket.io实例
<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:
服务端截图: