Socket.io教程: 原生nodejs结合Socket.io实现服务器和客户端的相互通信

安装 Socket.io

  • 官网:http://socket.io/
  • 文档:https://socket.io/docs/
  • $ npm install socket.io

Socket.io对象的创建

写原生的 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 对象

index.html

<!DOCTYPE html> 
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <title>Document</title> 
</head>
<body>

<h1>我是 index 页面</h1>

<button id="button">和服务器通信</button>

<script type="text/javascript" src="/socket.io/socket.io.js"></script> 

<script type="text/javascript">
   var socket = io(); 
</script>

</body> 
</html>

至此,服务器和客户端都有 socket 对象了

客户端,服务器建立连接并通信

服务端

服务器端通过 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()发 出的,所以指的是向这个客户端发出语句。广播,就是给所有当前连接的用户发送信息

客户端

客户端端通过 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','我是客户端的数据'); 
}

socket.io的应用场景

  • 即时通信:聊天室,比如QQ
  • 直播弹幕的实现
  • 移动App与服务器的数据同步
  • 智能客服机器人
  • 等等

猜你喜欢

转载自blog.csdn.net/Tyro_java/article/details/106599652