配置环境
前端环境:“socket.io-client”: “2.2.0”
后端环境:“socket.io”: “2.2.0”,
均在package.json中加上即可
在www服务器上引入socket.io模板
var socketIo = require("socket.io");//引入socket.io
var io = new socketIo(server);//将socket.io注入express模块
在webpack打包全局配置语法
new webpack.ProvidePlugin({
io: 'socket.io-client',
'window.io': 'io',
}),
webpack反向代理配置
'/socket.io/*': {
target: 'http://localhost:3000',
host: 'http://localhost:3000',
secure: false,
onProxyRes: function onProxyRes(proxyRes, req, res) {
}
},
www服务器作为服务端
io.on("connection", function (socket) {
// socket.io 使用 emit(eventname,data) 发送消息,使用on(eventname,callback)监听消息
//监听客户端发送的 sendMsg 事件
console.log("连接成功");
socket.on('generate.html-register', function (id, msg) {
// console.log("generate.html-register");
socket.join('room')
});
socket.on('href.html-register', function (id, msg) {
// console.log("href.html-register");
socket.join('room')
});
socket.on('wechatLoginSuccessCallback', function (roomId) {
console.log("服务器收到需要通知的客户端id:", roomId);
socket.broadcast.to(roomId).emit("wechatLoginSuccessCallback", '');
})
socket.on('upload_file_success', function (msg) {
socket.broadcast.to('room').emit("generate.html-uploadSuccess", '');//广播到'room'除了自己
socket.emit("generate.html-uploadSuccess", '');//再将广播发给自己
})
});
module.exports = io;
客户端使用
//因为本机使用localhost所以connect(url)中的url可以不填或者写http://localhost
var socket = io.connect(); //连接服务端
socket.emit("generate.html-register", ''); //发送信息,第一个参数为发送得到对象function,第二对象为内容
socket.on("generate.html-uploadSuccess", function (data) { //绑定监听(内容可忽略)
$('#shadow').css("display","block");
document.documentElement.style.overflowY = 'hidden';
setTimeout(function () {
$('#shadow').css("display","none");
document.documentElement.style.overflowY = 'scroll';
window.location.href = "preview.html";
},5000);
});
一般来说只有前端才能向后端请求,请求完成后端再做出响应反馈给前端。而socket.io机制就解决了后端可以主动向
前端发出请求,通过该原理即可实现聊天室的功能