在Node环境下socket.io前后端实时通信（聊天室的实现）

配置环境

前端环境：“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机制就解决了后端可以主动向 前端发出请求，通过该原理即可实现聊天室的功能