socket.io的简单使用

2021-02-03 18:01:55 浏览数 (1)

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

代码语言:javascript复制
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方法后,所有客户端都会接收到信息,包括自己。

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

代码语言:html复制
<!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服务器的简单使用,希望对你有所帮助。

0 人点赞