Nodejs中实现实时通讯的socket.io模块

最新推荐文章于 2024-09-29 01:54:58 发布

小梦新靓

最新推荐文章于 2024-09-29 01:54:58 发布

阅读量621

点赞数

分类专栏： Nodejs

本文链接：https://blog.csdn.net/qq_43712187/article/details/103148968

版权

Nodejs 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一、websocket实现了实时监听

在Nodejs中socket.io对websocket进行了封装
socket.io 是基于 Websocket 的Client-Server 实时通信库。
socket.io类库不但可以相互发送消息,而且还可以通过socket端口对象的emit方法互相发送事件.

二、实现步骤

2.1、服务端（Server）

1、下载socket.io第三方包—加载记得带双引号（出过错）
2、加载socket.io第三包
3、第一步：建立服务监听

var a1=app.listen(1000,()=>{
    console.log("服务器已启动:http://localhost:1000")
})

// 第一步：建立服务监听
const io  = require('socket.io')(a1);

第二步：时刻监听客户端的请求io.on(,)，回调函数是客户端传递的信息
第三步：并接收后给客户端返回数据io.emit(,)

connection是建立连接的事件

io.on('connection',(socket)=>{
    socket.on('sentToServer',(message)=>{
        console.log(message);
        io.emit('sendToClient',{
            message:"你好我是服务端我想和你聊天"
        })
    })
})

断开连接

disconnect是断开连接的事件

// 监听连接断开事件
io.on("disconnect", () => {
    console.log("连接已断开...");
});

2.2、客服端（Client）

第一步：导入socket.io的包

<script src="socket.io.js"></script>

第二步：与服务器建立连接

const socket = io.connect("http://localhost:1000");

然后就是向服务端发送数据socket.emit()

document.querySelectorAll('button')[0].addEventListener('click',function () {
  console.log(1);
    socket.emit("sentToServer", {
        message:'你好！我们可以聊天了,我是客户端'
    });
});

第三步：//第三步：获取服务端发送过来的信息----可以不断接收

socket.on("sendToClient", message => {

    console.log(message);
});

三、完整代码

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/socket.io.js"></script>
</head>
<body>
<button id="send">发送消息到服务器</button>
<div>
    <p>服务器返回的消息是：</p>
    <i id="msg"></i>
</div>
<script src="socket.io.js"></script>
<script>
    //第一步： 1. 与服务器端建立连接
    const socket = io.connect("http://localhost:1000");

    // 第二步：向服务器端发送信息----可以不断发送
    //console.log( document.querySelectorAll('p')[0]);
    document.querySelectorAll('button')[0].addEventListener('click',function () {
        socket.emit("sentToServer", {
            message:'你好！我们可以聊天了,我是客户端'
        });
    });
    //
    // //第三步：获取服务端发送过来的信息----可以不断接收
    socket.on("sendToClient", message => {

        console.log(message);
    });
</script>

</body>
</html>

index.js

const express=require('express');
const app=express();
var a1=app.listen(1000,()=>{
    console.log("服务器已启动:http://localhost:1000")
})

// 第一步：建立服务监听
const io  = require('socket.io')(a1);
//第二步：监听客户端链接,回调函数会传递本次链接的socket
io.on('connection',(socket)=>{
    socket.on('sentToServer',(message)=>{
        console.log(message);
        io.emit('sendToClient',{
            message:"你好我是服务端我想和你聊天"
        })
    })
})

//socket.io建立连接主要有这几部分