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

最新推荐文章于 2024-08-10 07:05:17 发布

Wang's Blog

最新推荐文章于 2024-08-10 07:05:17 发布

阅读量1k

点赞数 1

分类专栏： Full Stack NodeJs Javascript 文章标签： nodejs socket.io

本文链接：https://blog.csdn.net/Tyro_java/article/details/106599652

版权

Javascript 同时被 3 个专栏收录

97 篇文章 3 订阅

订阅专栏

Full Stack

94 篇文章 5 订阅

订阅专栏

NodeJs

60 篇文章 1 订阅

订阅专栏

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