前端vue使⽤vue-socket.io与socket.io-client与后台使⽤net。。。
因为项⽬中需要⽤到socket实现端到端的实时通信对话
⽹上的教程也多是后台使⽤node，笔者这⾥项⽬后台使⽤的是java，所以只能另辟蹊径
话不多说开搞，这⾥记录⼀下搞得过程遇到的需要注意的问题
Java 后端
1.在l添加netty-socketio的jar包
<!-- 引⼊socketIo的jar包 -->
<dependency>
<groupId&undumstudio.socketio</groupId>
<artifactId>netty-socketio</artifactId>
<version>1.7.7</version>
</dependency>
2.添加socketIo辅助类
package com.magicbox.api.prescription.utils;
import t.ApplicationListener;
import t.event.ContextRefreshedEvent;
import org.springframework.stereotype.Component;
undumstudio.socketio.AckRequest;
undumstudio.socketio.Configuration;
undumstudio.socketio.SocketConfig;
undumstudio.socketio.SocketIOClient;
undumstudio.socketio.SocketIOServer;
undumstudio.socketio.Transport;
undumstudio.socketio.listener.ConnectListener;
undumstudio.socketio.listener.DataListener;
undumstudio.socketio.listener.DisconnectListener;
@Component("SocketIO")
public class SocketIO implements ApplicationListener<ContextRefreshedEvent> {
public void onApplicationEvent(ContextRefreshedEvent arg0) {
if (ApplicationContext().getParent() != null) {// root application context 有parent，他就是⼉⼦.
// 需要执⾏的逻辑代码，当spring容器初始化完成后就会执⾏该⽅法。
new Thread(new Runnable() {
public void run() {
/
/ TODO Auto-generated method stub
socketStart();
}
}).start();
}
}
private void socketStart() {
System.out.println("in socketio");
Configuration config = new Configuration();
config.tHostname("172.17.30.221");
config.tPort(7777);
SocketConfig sockConfig = new SocketConfig();
语言领域目标//地址服⽤，这时候再启动不报错
sockConfig.tReuAddress(true);
//设置使⽤的协议和轮询⽅式
config.tTransports( Transport.WEBSOCKET,Transport.POLLING);
//设置允许源
//设置允许源
config.tOrigin(":*:");
config.tSocketConfig(sockConfig);
//允许最⼤帧长度
车厘子孕妇可以吃吗
config.tMaxFramePayloadLength(1024 * 1024);
/
/允许下最⼤内容
config.tMaxHttpContentLength(1024 * 1024);
SocketIOServer rver = new SocketIOServer(config);
rver.addConnectListener(new ConnectListener() {
public void onConnect(SocketIOClient client) {
// TODO Auto-generated method stub
String clientInfo = RemoteAddress().toString();
String clientIp = clientInfo.substring(1, clientInfo.indexOf(":"));// 获取ip
System.out.println("建⽴客户端连接ip"+clientIp);
client.ndEvent("connected", "ip: " + clientIp);
}
});
rver.addDisconnectListener(new DisconnectListener() {
public void onDisconnect(SocketIOClient client) {
String clientInfo = RemoteAddress().toString();
String clientIp = clientInfo.substring(1, clientInfo.indexOf(":"));// 获取ip
System.out.println("断开客户端连接ip"+clientIp);
client.ndEvent("disconned", "ip: " + clientIp);
}
});
rver.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 = RemoteAddress().toString();
String clientIp = clientInfo.substring(1, clientInfo.indexOf(":"));
System.out.println(clientIp + "：客户端：************" + data);
client.ndEvent("msginfo", "服务端返回信息!");
}
});
rver.start();
try {
Thread.sleep(Integer.MAX_VALUE);
} catch (InterruptedException e) {
// TODO Auto-generated catch block
幼儿园安全第一课
e.printStackTrace();
}
rver.stop();
}
}
以上的代码有⼏个需要注意的地⽅
1.代码实现了implements ApplicationListener<ContextRefreshedEvent>这个以上是容器需要启动的与springmvc差不多（平⾏）的应⽤，意思就是有两个需要启动的应⽤，web项⽬启动时候，tomcat会遍历有多少个ApplicationListener，这时候会执⾏这个类的onApplicationEvent⽅法，如果不加以判断，每次执⾏root ApplicationListener 时候都会调⽤⼀次onApplicationEvent⽅法，这就会使得重复执⾏onApplicationEvent⽅法，会导致 地址被占⽤的（address already in u）
在本项⽬也遇到了该问题
先来看⼀下本项⽬的容器
所以这⾥SocketIOServer这个component启动了两次调⽤了两次onApplicationEvent⽅法
第⼀次在root webapplication ，第⼆次是⾃⼰SocketIOServer，所以会造成地址服⽤
解决：当root webapplication 启动后才运⾏
代码为
if (ApplicationContext().getParent() != null) {// root application context 有parent，他就是⼉⼦.
// 需要执⾏的逻辑代码，当spring容器初始化完成后就会执⾏该⽅法。
new Thread(new Runnable() {
public void run() {
// TODO Auto-generated method stub
socketStart();
}
k3系统
}).start();
}
}
判断root启动后再执⾏
2再者是要注意netty socketrver端的配置
Configuration config = new Configuration();
config.tHostname("172.17.30.221");
config.tPort(7777);
SocketConfig sockConfig = new SocketConfig();
//地址服⽤，这时候再启动不报错
sockConfig.tReuAddress(true);
//设置使⽤的协议和轮询⽅式
config.tTransports( Transport.WEBSOCKET,Transport.POLLING);
//设置允许源
config.tOrigin(":*:");
config.tSocketConfig(sockConfig);
//允许最⼤帧长度
config.tMaxFramePayloadLength(1024 * 1024);
//允许下最⼤内容
config.tMaxHttpContentLength(1024 * 1024);
SocketIOServer rver = new SocketIOServer(config);
3再者是要注意 连接上的⽅法，断开连接⽅法，与⾃定义⽅法、
01.连接上的⽅法
rver.addConnectListener(new ConnectListener() {
public void onConnect(SocketIOClient client) {
// TODO Auto-generated method stub
String clientInfo = RemoteAddress().toString();
String clientIp = clientInfo.substring(1, clientInfo.indexOf(":"));// 获取ip
System.out.println("建⽴客户端连接ip"+clientIp);
client.ndEvent("connected", "ip: " + clientIp);
}
});
02断开连接的⽅法
rver.addDisconnectListener(new DisconnectListener() {
public void onDisconnect(SocketIOClient client) {
String clientInfo = RemoteAddress().toString();
String clientIp = clientInfo.substring(1, clientInfo.indexOf(":"));// 获取ip
System.out.println("断开客户端连接ip"+clientIp);
client.ndEvent("disconned", "ip: " + clientIp);
}
});
如果客户端socketIO是在main.js配置的
旧心酸
则建⽴连接与断开连接的响应⽅法必须在APP.vue才能响应到，不能在具体页⾯
03⾃定义的⽅法
rver.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 = RemoteAddress().toString();
String clientIp = clientInfo.substring(1, clientInfo.indexOf(":"));
System.out.println(clientIp + "：客户端：************" + data);
client.ndEvent("msginfo", "服务端返回信息!");
}
});
其次还要注意client.ndEvent发给客户端的⽅法有⼏个，⽐如⼴播⽅法，发给具体的某个⼈，发到某个房间内等（待完成）如在node的socket 的⽅法是这样
// 所有的消息请求都是建⽴在已连接的基础上的
<('connect', onConnect);
// 发送给当前客户端
//发送给所有客户端，包括发送者
// 发送给所有客户端，除了发送者
it('broadcast', 'hello friends!');
// 发送给同在 'game' 房间的所有客户端，除了发送者
<('game').emit('nice game', "let's play a game");
// 发送给同在 'game' 房间的所有客户端，包括发送者
io.in('game').emit('big-announcement', 'the game will start soon');
这⾥调⽤者io与socket不⼀样是看这⾥
var io = require('socket.io')(80);
素三鲜包子<('connection', function (socket) {
<('message', function () { });
关于奋斗的事例
<('disconnect', function () { });
});
socket是io的connection⽅法回调的⼊参
//服务端接收到chat message事件向所有客户端转发chat message（包括⾃⼰）
<('connection', function(socket){
<('chat message', function(msg){
});
});
java这边的对应的⽅法是？（待完善）node⽅法与java⽅法对⽐
1加⼊房间
node
socket.id, () => {
console.log('加⼊了', val.name);
OnlineUr[val.name] = socket.id;
io.id).emit('joined', OnlineUr); // 包括发送者
// console.log('join', id, OnlineUr);
});
java
client.joinRoom(string room);//加⼊房间
client.leaveRoom(string room);//离开房间
Collection<SocketIOClient> clients= RoomOperations(data).getClients();
for( SocketIOClient roomClient:clients) {
if(roomClient.equals(client)) {
continue;
}
roomClient.ndEvent("mes", "发送给除⾃⼰以外的该房间内的所有客户端");
}
这⾥有个博⽂作者提供的⼀些api，但是我对⼀个api存疑，
BroadcastOperations 对象的的这个⽅法，源码内没有
ndEvent(eventname,excludeSocketIOClient,data) 排除指定客户端⼴播。
客户端（vue）
1.下载
