181.Vue.js智能扫码点餐系统（十五）【原生nodejs结合Socket.io实现服务器和客户端的相互通信（扩展）】2019.03.24
0、知识点
- 安装 Socket.io
- 写原生的 JS，搭建一个服务器，server 创建好之后，创建一个 io 对象
- 服务器端通过 emit 广播，通过 on 接收广播
- 客户端端通过 emit 广播，通过 on 接收广播
1、 安装 Socket.io
- 网址：http://socket.io/
- 安装命令
npm install socket.io
2、写原生的 JS，搭建一个服务器，server 创建好之后，创建一个 io 对象
var http = require("http");
var server = http.createServer(function(req,res){
if(req.url == "/"){
//显示首页
fs.readFile("./index.html",function(err,data){
res.end(data);
});
}
});
var io = require('socket.io')(server);
//监听连接事件
io.on("connection",function(socket){
console.log("1 个客户端连接了");
})
server.listen(3000,"127.0.0.1");
- 写完这句话之后，你就会发现，http://127.0.0.1:3000/socket.io/socket.io.js 就是一个 js 文件的地址了
- 现在需要制作一个 index 页面，这个页面中，必须引用秘密 js 文件。调用 io 函数，取得 socket对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>我是 index 页面，我引用了秘密 script 文件</h1>
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
<script type="text/javascript">
var socket = io();
</script>
</body>
</html>
至此，服务器和客户端都有 socket 对象了。服务器的 socket 对象
3、服务器端通过 emit 广播，通过 on 接收广播
var io=require('socket.io')(server);
io.on('connection',function(socket){
console.log('和服务器建立连接了');
socket.on('to-server',function(data){
console.log('客户端说:'+data);
socket.emit('to-client','我是服务器返回的数据');
})
socket.on('disconnect',function(){
console.log('断开连接了');
})
})
-
每一个连接上来的用户，都有一个 socket。 由于我们的 emit 语句，是 socket.emit()发
出的，所以指的是向这个客户端发出语句 -
广播，就是给所有当前连接的用户发送信息
var io=require('socket.io')(server);
io.on('connection',function(socket){
console.log('和服务器建立连接了')
socket.on('to-server',function(data){
console.log('客户端说:'+data);
io.emit('to-client','我是服务器返回的数据');
})
socket.on('disconnect',function(){
console.log('断开连接了');
})
})
- 应用场景：广播
4、客户端端通过 emit 广播，通过 on 接收
var socket=io.connect('http://localhost:3001');
socket.on('connect',function(){
console.log('客户端和服务端建立连接了');
})
socket.on('disconnect',function(){
console.log('客户端和服务端断开连接了');
})
socket.on('to-client',function(data){
console.log('客户端说:'+data);
})
var btn=document.getElementById('button');
btn.onclick=function(){
socket.emit('to-server','我是客户端的数据');
}
- 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/'); /*和服务器建立连接*/
</script>
</head>
<body>
客户端
<button id="button">给服务器发送数据</button>
</body>
</html>
- 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('服务器建立连接了');
});
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
* */