前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >socket.io的简单使用

socket.io的简单使用

原创
作者头像
挥刀北上
修改2021-02-03 18:01:55
1.9K0
修改2021-02-03 18:01:55
举报
文章被收录于专栏:Node.js开发

在开发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服务器的简单使用,希望对你有所帮助。

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

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

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

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档