SpringMvc + socket.io + vue + vue-socket.io实例
程序员文章站
2022-06-26 09:54:03
SpringMvc部分实现 1. 所需依赖 com.corundumstudio.socketio netty-socketio 1.7.7
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:
服务端截图: