1、 安装 Socket.io
网址:http://socket.io/
npm install socket.io
2、写原生的 JS，搭建一个服务器，server 创建好之后， 创建一个 io 对象。
var http=require(‘http‘); var fs=require(‘fs‘); /*fs内置的模块*/ var app=http.createServer(function(req,res){ //加载静态页面 fs.readFile(‘app.html‘,function(err,data){ res.writeHead(200,{"Content-Type":"text/html;charset=‘utf-8‘"}); res.end(data); }) }) //引入socket.io var io = require(‘socket.io‘)(app); io.on(‘connection‘, function (socket) { console.log(‘服务器建立连接了‘); }); app.listen(3000); /*使用socket.io 1.安装 npm install socket.io 2、引入建立连接 var io = require(‘socket.io‘)(app); io.on(‘connection‘, function (socket) { console.log(‘服务器建立连接了‘); }); 3、在客户端 html里面引入js http://localhost:3000/socket.io/socket.io.js * */
制作一个index页面，这个页面中，必须引用秘密js文件。调用io函数，取得socket 对象。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="http://localhost:3000/socket.io/socket.io.js"></script> <script> var socket = io(‘http://localhost:3000/‘); /*和服务器建立连接*/ </script> </head> <body> 客户端 <button id="button">给服务器发送数据</button> </body> </html>
3、服务器端通过 emit 广播，通过 on 接收广播
app.js
var http=require(‘http‘); var fs=require(‘fs‘); /*fs内置的模块*/ var app=http.createServer(function(req,res){ //加载静态页面 fs.readFile(‘app.html‘,function(err,data){ res.writeHead(200,{"Content-Type":"text/html;charset=‘utf-8‘"}); res.end(data); }) }) //引入socket.io var io = require(‘socket.io‘)(app); io.on(‘connection‘, function (socket) { console.log(‘服务器建立连接了‘); //服务器获取客户端广播的数据 socket.on(‘addcart‘,function(data){ console.log(data); //服务器给客户端发送数据 //socket.emit(); /*谁给我发信息我把信息广播给谁*/ //io.emit() ; /*群发 给所有连接服务器的客户都广播数据*/ //socket.emit(‘to-client‘,‘我是服务器的数据‘+data.client); io.emit(‘to-client‘,‘我是服务器的数据‘+data.client) }) }); app.listen(3000); /*使用socket.io 1.安装 npm install socket.io 2、引入建立连接 var io = require(‘socket.io‘)(app); io.on(‘connection‘, function (socket) { console.log(‘服务器建立连接了‘); }); 3、在客户端 html里面引入js http://localhost:3000/socket.io/socket.io.js * */
app.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="http://localhost:3000/socket.io/socket.io.js"></script> <script> var socket = io(‘http://localhost:3000/‘); /*和服务器建立连接*/ window.onload=function(){ var btn=document.getElementById(‘button‘); btn.onclick= function () { //客户端给服务器发送数据 socket.emit(‘addcart‘,{ client:‘我是客户端的数据‘ }) } //监听服务器的广播 socket.on(‘to-client‘,function(data){ console.log(data) }) } </script> </head> <body> 客户端 <button id="button">给服务器发送数据</button> </body> </html>