nodejs建立长连接模块socket.io

最新推荐文章于 2024-04-26 17:44:53 发布
最新推荐文章于 2024-04-26 17:44:53 发布
阅读量787 收藏
点赞数
分类专栏： Nodejs 文章标签： nodejs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44862403/article/details/107424724
版权

nodejs建立长连接模块socket.io

长连接

服务器端发送完新数据也不断开连接，继续等待下一份新数据，除非超过了一定时限（即自定义的最大连接空闲时长，浏览器可以超时重连）

WebSocket
什么是websocket?

用于建立客户端和服务端的双向交互通信,打开一条会话通道,让双方可以进行实时通信

这个链接的每一端就被称为socket,避免了使用传统的轮询方式来实现通信

websocket和socket.io之间的区别是什么?

socket.io是一个开源库,他是对websocket进行的封装

增强了浏览器的兼容性

使用起来更方便,功能也更强大

引入依赖包

npm i express -S、npm i socket.io -S

可以依照socket.io官方文档要求添加
服务器talkServer.js
const express = require('express');
const app = express();

//socket.io官方文档要求添加
const server = require('http').createServer(app);
const io = require('socket.io')(server);
//记录一下有几个人连接上了服务器
var userId = 0;
//监听connection事件,只要有客户端连接就执行回调函数
io.on('connection',(socket)=>{
    var user = ++userId;//当前连接到的用户的编号
    //socket就是连接到服务器的那个客户端
    //接收客户端消息
    //监听客户端的一个事件,事件名称自己定义
    socket.on('msg-from-client',function(data){
        io.emit('msg-from-server',user+"------>"+data)
    })
    //向客户端分发消息  
    io.emit('msg-from-server',user+'------上线了')
})
//socket.io官方文档要求开启端口监听使用server
server.listen(7777);
客户端webServer.js
const express = require('express');
const app = express();

//开启静态资源服务器
app.use(express.static('./public'));

app.listen('8888')
webServer.js中的静态文件talk.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>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 400px;
            height: 550px;
            margin:50px auto;
            border:1px solid #ccc;
            position: relative;
        }
        .top{
            position: absolute;
            top:20px;
            left:20px;
            right:20px;
            bottom:80px;
            overflow: auto;
        }
        .bottom{
            position: absolute;
            bottom:20px;
            left:20px;
            right:20px;
        }
        #message{
            width: 300px;
            height: 30px;
            border:1px solid #ccc;
            line-height: 30px;
            float: left;
            padding-left:10px;
            box-sizing: border-box;
        }
        #send{
            width: 50px;
            float:right;
            height: 30px;
        }
        .row{
            line-height: 35px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="top">
            
        </div>
        <div class="bottom" style="color: red;font-size: 200px;">
            <input type="text" id="message">
            <input type="button" value="发送" id="send">
        </div>
    </div>
    <script src="/jquery-1.12.4.js"></script>
    <!-- 
        我们下载的socket.io这个包里面有一个文件夹叫做socket.io-client,里面的dist/socket.io.js 
        把这个文件拷贝到前端静态资源服务器里面
    -->
    <script src="/socket.io.js"></script>
    <script>
        //引入socket.io.js以后就会有一个io方法,通过io连接服务端
        var socket = io('http://请求连接的服务端域名地址:7777');
        //记录下一共有多少条消息
        var count = 0;
        //监听服务器发送给客户端消息的事件
        socket.on('msg-from-server',function(data){
            count++;
            //把接收到的服务器消息,显示在聊天框里面
            $('.top').append('<div class="row">'+data+'</div>');
            $('.top').scrollTop(count*35);
        })

        //点击send给服务端发消息
        $('#send').click(function(){
            socket.emit('msg-from-client',$('#message').val());
            $('#message').val('')
        })
        //在message里面按回车也可以发消息
        $('#message').keyup(function(e){
            if(e.keyCode==13){
                socket.emit('msg-from-client',$('#message').val());
              $('#message').val('')
            }
        })
    </script>
</body>
</html>
anyw_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
nodejs 模块安装socket.io 和 错误解决
01-08
前一篇文章我们讲述了，nodejs的安装，并且把管理包npm也安装了。为了减少出错的概率首先升级npm 升级npm npm install -g npm 安装socket.io npm install socket.io 上述就是socket.io的安装步骤，但是很有可能会...
nodeJS+socket.io做一个简单的聊天室
05-11
<script src="/socket.io/socket.io.js"> const socket = io(); let username = prompt("请输入您的昵称:"); socket.emit('newUser', username); socket.on('usersConnected', (count) => { document....
如何用 nodejs 编写TCP长连接应用
嘿嘿
12-13 2250
本文通过讨论TCP长连接的基本特性和原理，结合TCP应用层协议的设计给出一个基本的nodejs实现，供大家参考与探讨。 起航 最近在整理近一两年来自己写的一些nodejs模块，其中一个是用于编写TCP长连接应用的模块。目前它在线上已经稳定跑了1年多，由于底层是通用的，不包含任何上层逻辑，于是就开源出来了，供大家一起学习和交流。这篇文章就顺便写一写这方面的东西，算是个总结。开源地址为：https...
vue+express+socket.io实现前后端保持长连接
qindayong
07-06 1560
vue+express+socket.io实现前后端保持长连接 1.安装依赖包 #vue npm install vue-socket.io --save #node npm install socket.io --save 2.在端项目中main.js引入依赖包 //socket设置 import VueSocketio from 'vue-socket.io'; Vue.use(new VueSocketio({ debug: true, connection: 'http://127.0.0
socket.io认证，nodejs实现socket.io demo（server/client）
最新发布
liuzhenlzlz的专栏
04-26 632
socket.io认证 webscoket_header socket.io服务端与客户端 长链接nodejs实现
node js 保持长连接
weixin_42066070的博客
07-07 586
Cannot enqueue Handshake after invoking quitnode:events:505
node+socket-io长连接应用demo
RRRRRDong的博客
04-24 319
目的: 建立socket-io 长连接， 客户端实现监听用户添加操作，添加后服务端返回最新的数据给客户端，取代了查询+添加接口，代码分为server和client端，如下所示： server端 const express = require('express'); // const cors = require('cors'); const { db } = require('../../Server/mysql_main'); const app = express(); // app.use(co
在Node.js中使用TCP套接字编程
热门推荐
tiewen的专栏
12-14 1万+
转自：http://cnodejs.org/topic/4fb1c1fd1975fe1e1310490b   在Node.js中使用TCP套接字编程 译自http://www.hacksparrow.com/tcp-socket-programming-in-node-js.html 想知道如何在NodeJS中使用socket编程？在NodeJS中有三种socket：1. TCP，
NodeJS如何实现真正的长连接？
w2sft的博客
03-25 2750
什么是长连接？ 长连接，即：keepalive启用。 通俗的讲： 非长连接状态下，每个请求与服务器通信完毕后，通道就关闭了。再次请求时，还需要重新打开通道。 而如果是长连接，请求完成后，通道在一定时间内不会关闭，再次请求时不需要重开通道，这是就有通信效率上的优势。 什么时候适合启用长连接？ 1、当web上的静态网页，如：Html、图片、Css、Js居多时，建议启用长连接 。 ...
_study-nodejs-socketcursor:nodejs socket.io套接字游标项目
05-22
在这个项目中，你将学习到如何设置WebSocket服务器，如何在客户端和服务端建立连接，如何发送和接收自定义事件，以及如何管理实时数据流的游标机制。通过研究源代码和执行示例，你可以深入理解Socket.IO的工作原理，...
Node.js-基于nodejs-websocket模块Socket.io库实现多人在线聊天室
08-10
<script src="https://cdn.socket.io/4.1.2/socket.io.min.js"> const socket = io('http://localhost:3000'); const form = document.getElementById('form'); const input = document.getElementById('input...
nodejs中Socket 服务的建立和使用
阿牛哥的博客
04-15 6781
/* *创建Socket服务器 */ // 1、加载net模块 var net = require('net'); // 2、创建net.server对象 var server = net.createServer(); // 3.绑定connetction事件，监听客户的连接 server.on('connection', function (socket) { console.log('有客户连接成功了。'); }) // 4.调用listen()启动监听 server.listen(300
HTTP的长连接和短连接
fengqiaojiangshui的专栏
05-05 634
本文总结&分享网络编程中涉及的长连接、短连接概念。     关键字：Keep-Alive，并发连接数限制，TCP，HTTP 一、什么是长连接      HTTP1.1规定了默认保持长连接（HTTP persistent connection ，也有翻译为持久连接），数据传输完成了保持TCP连接不断开（不发RST包、不四次握手），等待在同域名下继续用这个通道传输数据；相反的
socket中的短连接与长连接,心跳包示例详解
北雨南萍
06-06 1万+
TCP连接简介 当网络通信时采用TCP协议时，在真正的读写操作之前，server与client之间必须建立一个连接， 当读写操作完成后，双方不再需要这个连接时它们可以释放这个连接， 连接的建立是需要三次握手的，而释放则需要4次握手， 所以说每个连接的建立都是需要资源消耗和时间消耗的 ​经典的三次握手示意图：​ ​ ​ ​ 经典的四次握手关闭图：   ​
vue-socket.io实现长链接
大山博客
12-11 1501
之前提到ScokJS .SockJS是一个浏览器JavaScript库，它提供了一个类似于网络的对象。SockJS提供了一个连贯的、跨浏览器的Javascript API，它在浏览器和web服务器之间创建了一个低延迟、全双工、跨域通信通道。 今天介绍vue-socket.io 一个专门问题vuejs提供的plugin，这里实现了一个身份证读卡器的socket长链接。 引入方式一： 只使用了vue-socket.io 的方法，介绍 vue-socket.io其实是在socket.io-client基础.
Socket Client 长连接及心跳检测
qq_22074337的博客
04-29 4003
说明: springBoot下socket一对一建立长连接通讯，包括客户端心跳检测、掉线重连、收发信息等
nodejs使用socket.io
01-18
以下是一个使用Socket.IO在Node.js中实现通讯的示例代码： 1. 安装Socket.IO模块： ```shell npm install socket.io ``` 2. 创建服务器端（server.js）： ```javascript var express = require('express'); var app = express(); var server = require('http').createServer(app); var io = require('socket.io')(server); // 监听客户端连接事件 io.on('connection', function(socket){ console.log('A client connected.'); // 监听客户端发送的消息事件 socket.on('message', function(data){ console.log('Received message from client:', data); // 触发事件告知客户端 io.emit('message', 'Server received your message: ' + data); }); // 监听客户端离开事件 socket.on('disconnect', function(){ console.log('A client disconnected.'); // 触发事件告知服务端 io.emit('disconnect', 'A client disconnected.'); }); }); // 启动服务器 server.listen(3000, function(){ console.log('Server is running on port 3000.'); }); ``` 3. 创建客户端（client.html）： ```html <!DOCTYPE html> <html> <head> <title>Socket.IO Client</title> <script src="https://cdn.socket.io/socket.io-3.1.3.min.js"></script> <script> var socket = io(); // 发送消息给服务端 socket.emit('message', 'Hello, server!'); // 监听服务端发送的消息事件 socket.on('message', function(data){ console.log('Received message from server:', data); }); // 监听服务端触发的离开事件 socket.on('disconnect', function(data){ console.log('Server:', data); }); </script> </head> <body> <h1>Socket.IO Client</h1> </body> </html> ``` 请注意，以上代码仅为示例，实际使用时可能需要根据具体需求进行修改。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值