socket.io的简单使用

原创

挥刀北上

修改于 2021-02-03 18:01:55

1.9K0

修改于 2021-02-03 18:01:55

文章被收录于专栏：Node.js开发

在开发websocket的时候，我们可能会用到socket.io这个库，来看一下这个库的简答应用，先看一个简单的案例，服务端代码：

const express = require('express');
const http = require('http');
const io = require('socket.io');

const app = express();
app.use(express.static("./"))
const server = http.Server(app);

const socketServer = new io.Server(server);

socketServer.on('connection', (socket) => {

    //监听connection（用户连接）事件，socket为用户连接的实例
    socket.on('disconnect', () => {
        //监听用户断开事件
        console.log("用户" + socket.id + "断开连接");
    });
    console.log("用户" + socket.id + "连接");
    setInterval(() => {
        socket.emit('msg', '你好浏览器');
    }, 1000)
    socket.on('msg', (data) => {
        //监听msg事件（这个是自定义的事件）
        console.log(data);//你好服务器
        
        //向socket用户发送信息
    })
})

server.listen(3000);

梳理代码，以上代码完成了如下功能：

1、导入socekt.io得到io函数

2、结合express和http库创建web服务器server

3、用io函数和web服务器server创建socket服务器socketServer。

以上三步基本是websocket服务端框架的大致思路。

然后socketServer监听连接事件，当用户访问webserver时同时会连接socketserver。在回调函数中我们得到了前后端通信的socekt。

通过socket我们可以监听和发送信息，这里有点类似发布订阅者模式，socket内部会自动维护事件名称。

这里需要注意的是，使用socket的emit方法发送信息是单线的，一对一，除了emit，socket上还有broadcast属性可以使用emit方法，broadcast的emit是广播形式的发送信息，除了自己之外的所有客户端都会接收到信息。另外一个是socketServer也可以使用emit方法，socketServer调用emit方法后，所有客户端都会接收到信息，包括自己。

接下来看一下客户端代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<!-- <script crossorigin="anonymous"
    integrity="sha512-ZqQWGugamKhlSUqM1d/HMtwNG+hITmd/ptoof91lt5ojFZ+2bKlkvlzkmnDIrnikDY+UDVZVupLf6MNbuhtFSw=="
    src="https://lib.baomitu.com/socket.io/3.1.0/socket.io.min.js"></script> -->
<script src="/socket.io/socket.io.js"></script>
<script>
    const socket = io();
    //向指定的服务器建立连接，地址可以省略
   
    //自定义msg事件，发送‘你好服务器’字符串向服务器

    setTimeout(()=>{
        console.log(999)
        socket.on('msg', (data) => {
             socket.emit('msg', '你好服务器');
            //监听浏览器通过msg事件发送的信息
            console.log(data);//你好浏览器
        });
    },3000)
</script>
</body>
</html>

这里需要注意的是：通过socket.io搭建的websocket服务器，只能和socket.io配套的前端库一起使用，此时不能在使用原生的websocket接口代码。

还有就是在引入前端库时可以直接使用这个地址/socket.io/socket.io.js。因为搭建起websocket服务器后，服务器会默认发布这个资源。

调用io函数时可以不用传递参数，但是如果使用我不cdn的socket.io.js的话就需要传递地址了。

以上便是使用socket.io搭建websocket服务器的简单使用，希望对你有所帮助。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

socket.io