用NodeJs使用Io做一个聊天室

最新推荐文章于 2024-08-08 16:25:57 发布
最新推荐文章于 2024-08-08 16:25:57 发布
阅读量108 收藏
点赞数
文章标签： 后端 javascript python ViewUI
原文链接：https://my.oschina.net/7795442/blog/3017182
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

功能分析
我们要做一个聊天室，简单起见，就不做私聊的功能了，那么我们想要的功能可以是这些：
  1. 每个人有自己的昵称，在进入聊天室的时候自己输入。
  2. 每个人都可以发言
  3. 有一个区域用来展示所有的发言，并且要实时更新
  4. 有人加入的时候提示xxx加入了群聊
 
第一步，初始设定
 
1，在window安装nodejs，这一步省。
 
2，检查环境及安装
 
npm config ls    //修改文件夹名
 
npm install express  //安装express框架
 
npm install socket 
 
在E:\node_IM\development\node-chat当前目录，多出一个node_modules目录。
 
E:.
└─node-chat
    └─node_modules
        ├─express
        │  ├─lib
        │  │  ├─middleware
        │  │  └─router
        │  └─node_modules
        │      ├─.bin
        │      ├─accepts
        │      ├─array-flatten
        │      ├─body-parser
        │      │  └─lib
        │      │      └─types
        │      ├─bytes
        │      ├─content-disposition
        │      ├─content-type
        │      ├─cookie
        │      ├─cookie-signature
                ......    
        ├─socket.io
 
 
新建server.js文件在node-chat目录。
 
c0e613571467394281abf3c989bbca5e4bf.jpg
 
3，在vscode环境调试运行：
 
Administrator@7O1CMG3I79XXOLV MINGW64 /e/node_IM/development/node-chat
$ node server.js
listening on *:8080
 
 
f96f39688ea8d5dbdc95db27e1116291e38.jpg
 
 
第二步，聊天室页面的实现
1，在index.html中输入以下代码：
<!doctype html>
    <html>
    <head>
        <title>Socket.IO chat</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            body {
                font: 13px Helvetica, Arial;
            }
            form {
                background: #000;
                padding: 3px;
                position: fixed;
                bottom: 0;
                width: 100%;
            }
            form input {
                border: 0;
                padding: 10px;
                width: 90%;
                margin-right: .5%;
            }
            form button {
                width: 9%;
                background: rgb(130, 224, 255);
                border: none;
                padding: 10px;
            }
            #messages {
                list - style - type: none;
                margin: 0;
                padding: 0;
            }
            #messages li {
                padding: 5px 10px;
            }
            #messages li:nth-child(odd) {
                background: #eee;
            }
        </style>
      
        <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
        
    </head>
    <body>
        <ul id="messages"></ul>
        <form action="">
            <input id="m" autocomplete="off" /><button>发送</button>
        </form>
    </body>
    </html>
 
 
保存。

2，根目录跳转

前面我们在server.js中写了根目录返回hello world，现在我们让它跳转到聊天室页面。将server.js中的
//当访问根目录时，返回Hello World
app.get('/', function (req, res) {
   res.send('<h1>Hello world</h1>');
});
替换为
app.get('/', function(req, res){
   res.sendFile(__dirname + '/index.html');  
});
然后在CMD中ctrl+c结束，重新运行node server.js。
现在在浏览器中访问localhost:8080，已经跳转到聊天页面了。
 

第三，引入Socket

1，继续修改server.js，增加下方标注内容：
var express = require('express');
var app = express();
var http = require('http').Server(app); //将express注册到http中
var io = require('socket.io')(http);
//当访问根目录时，返回Hello World
app.get('/', function (req, res) {
    res.sendFile(__dirname+"/index.html");
});
 
var usocket = [];
io.on('connection',function(socket){
    console.log('a user connect');    //当有新的socket连接成功之后，就打印一下信息。
});
 
//启动监听，监听3000端口
http.listen(8080, function () {
    console.log('listening on *:8080');
});
 
 
2，然后编辑index.html，添加jquery.min.js和socket.io.js
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
 
然后我们重新启动node服务，访问localhost:3000。就会有以下结果。
 
 
第三，添加交互
       当用户有动作的时候，我们要显示在聊天面板中，就插入一个li标签好了。在index.html的script中写一个方法，后面显示什么内容，就调用这个方法在面模板中插入一条li就好了。在前面功能分析的时候，我们就说用户刚进来的时候，需要输入自己的昵称。
将以下代码写到index.html中。
var name = prompt("请输入你的昵称：");
function addLine(msg) {
        $('#messages').append($('<li>').text(msg));
}

1，发送昵称数据到后端

       新用户发送自己的昵称给服务器后，要让所有处在聊天室的人知道，所以服务器要发一个广播。发送数据给后端，调用socket的emit方法，这里指定一个事件名字叫join，然后后端会处理这个事件。
然后现在我们的script标签中是这样的。
<script>
    var name   = prompt("请输入你的昵称：");
    var socket = io()
    //发送昵称给后端
    socket.emit("join", name)
    function addLine(msg) {
        $('#messages').append($('<li>').text(msg));
    }
</script>

 

2，后端发送广播

       为了在后端区分用户，我们用一个usocket数组来保存每一个用户的socket实例。
首先监听join事件，在接收到昵称之后，将该用户的加入聊广播给所有用户。
server.js代码如下：
var express = require('express');
var app = express();
var http = require('http').Server(app); //将express注册到http中
var io = require('socket.io')(http);
 
//当访问根目录时，返回Hello World
app.get('/', function (req, res) {
    res.sendFile(__dirname+"/index.html");
});
 
var usocket = [];  //全局变量
io.on('connection',function(socket){ //
    console.log('a user connect');
     //监听join事件
    socket.on("join", function (name) {
        usocket[name] = socket;
        console.log(usocket);
        io.emit("join", name) //服务器通过广播将新用户发送给全体群聊成员
    })
    //new addition
    socket.on("message", function (msg) {
        io.emit("message", msg) //将新消息广播出去
    })
});
 
//启动监听，监听3000端口
http.listen(8080, function () {
    console.log('listening on *:8080');
});

然后在index.html的script中添加以下代码，接受到新用户加入事件的处理：
<script>
        var name = prompt("请输入你的昵称：");
        function addLine(msg) {
            $('#messages').append($('<li>').text(msg));
        }
 
        var socket = io();
         //发送昵称给后端
        socket.emit("join", name)
 
        //收到服务器发来的join事件时
            socket.on("join", function (user) {
                addLine(user + " 加入了群聊")
            })
 
        //接收到服务器发来的message事件
        socket.on("message", function (msg) {
                addLine(msg)
            })
 
       //当发送按钮被点击时
        $('form').submit(function () {
            var msg = $("#m").val() //获取用户的信息
            socket.emit("message", '('+ name+'):'+msg) //将消息发送给服务器
            $("#m").val("")
            return false; //阻止form提交
        })
</script>
 
现在我们再来测试一下，node server.js开启后端服务，然后访问localhost:8080，输入用户名iimT
 
演示效果：
54e3b0aa9cce0328b8c52eed1be362fa95c.jpg
 
 
 
 
 
 
 
 
 
 
 
 

转载于:https://my.oschina.net/7795442/blog/3017182

weixin_34190136
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
socket.io + nodes 实现webSocket消息提醒
lixld的专栏
06-22 3500
nodejs和socket.io的安装就不多说了 那么Socket.IO到底是什么呢？Socket.IO是一个WebSocket库 包括了客户端的js和服务器端的nodejs 它会自动根据浏览器从WebSocket、AJAX长轮询、Iframe流等等各种方式中选择最佳的方式来实现网络实时应用，非常方便和人性化， 而且支持的浏览器最低达IE5.5，应该可以满足绝大部分需求了。
nodeJS+socket.io做一个简单的聊天室
05-11
在本文中，我们将深入探讨如何使用Node.js和Socket.IO创建一个简单的聊天室。这是一个非常实用的项目，适合初学者入门，同时也是对这两种技术的绝佳实践。 Node.js是一种基于Chrome V8引擎的JavaScript运行环境，它...
Node.js-基于nodejs-websocket模块Socket.io库实现多人在线聊天室
08-10
基于nodejs-websocket模块、Socket.io库实现多人在线聊天室[丰富了上传图片，发送表情等实用聊天功能]
nodejs socket.io的使用
weixin_39559301的博客
11-27 170
目录结构 服务端server.js var express = require('express') var expressWs = require('express-ws') var fs= require('fs') var path = require('path'); //系统路径模块 //http协议，ws模块无法被浏览器直接访问 var app = express() ex...
NodeJS中使用Socket.IO
weixin_51072684的博客
03-28 2382
Socket.IO 是一个库，可以在客户端和服务器之间实现低延迟双向和基于事件的通信。它建立在WebSocket协议之上，并提供额外的保证，例如回退到 HTTP 长轮询或自动重新连接。
利用nodejs的简单web聊天
lululul123的博客
07-14 562
今天，学习了一个最基本的基于web的实时聊天，用到的技术有nodejs，html，css，socket.io（WebSocket），sco.js,Message.js,express搭建； 知识点： 1、当我们提到实时推送这个概念时，就会涉及到WebSocket技术，这是Html5定义的一套WebSocket协议，为了更好的解决实时推送，并消耗带宽的问题；WebSocket协议是一个基于TCP
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
10-23
在本文中，我们将深入探讨如何使用Angular和Node.js、socket.io技术栈来创建一个聊天室应用，特别是多人聊天室的功能。首先，我们需要了解基础架构的组成部分。 1. **利用Node.js搭建静态服务器**： Node.js是基于...
基于Nodejs利用socket.io实现多人聊天室
10-20
在本文中，我们将深入探讨如何使用Node.js和socket.io库创建一个多人聊天室。WebSocket是一种在Web应用程序中实现低延迟、双向通信的技术，它允许服务器和客户端之间建立持久的连接，以便实时交换数据。然而，由于...
nodejs实现的一个简单聊天室功能分享
10-25
在本教程中，我们将探讨如何使用Node.js和Socket.IO创建一个简单的聊天室。Node.js是一个基于Chrome V8引擎的JavaScript运行环境，它允许我们在服务器端使用JavaScript进行开发。Socket.IO是一个实时应用程序框架，...
通过Socket.IO与nodeJs实现即时消息推送
Jackia的专栏
07-09 1万+
http://book.mixu.net/ch13.html 很早开始就想用WebSocket完成即时消息推送功能。之前本打算用WebSocket + C#实现的，结果人上了年纪变笨了，弄了一天也没弄好 ⊙﹏⊙ 今天参考了几篇资料，终于搞定了一个Socket.IO结合nodeJs的Demo。 用Socket.IO有个很大的好处就是开发者不需要去关心浏览器差异。Chrome下会
使用socket.io开发简单群聊功能
chunyouhai5703的博客
11-08 146
1、新建package.json文件： { "name": "socket-chat-example", "version": "0.0.1", "description": "my first chat socket-chat-example", "depen...
菜鸟学习nodejs--Socket.IO即时通讯
热门推荐
ermuv5
04-27 3万+
动态web在html5以前，web的设计上并没有考虑过动态，他一直是围绕着文档设计的，我们看以前比较老的网站，基本上都是某一刻用来显示单一的文档的，用户请求一次web页面，获取一个页面，但是随着时间的推移，人们想要web做更多的事情了，而不是简单的要显示文档，而javaScript一直处于开发人员推动web页面功能的发展中心。 Ajax无疑是动态Web页面的一个重大发展，他不再需要我们即使更新一点
nodejs死亡笔记之socket.io那些事（附可用来撩妹的聊天功能）
mystery的博客
08-18 3789
我相信有很多人是看到撩妹才进来的，别急，我们要一步一步来。 websocket简介WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术。现很多网站为了实现即时通讯，所用的技术都是轮询(polling)。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客服端的浏览器，这种方式有一个很大的弊端，就是会占用很多的带宽。最新
深入剖析Nodejs的异步IO
小小石头的那些事儿
06-22 1万+
前言：Nodejs最赖以自豪的优势莫过于“单线程实现异步IO”了，也许你仍然丈二和尚摸不着头脑，Nodejs自我标榜是单线程，还能实现异步IO操作，这两者难道不是相互矛盾的么？葫芦里到底藏着什么药？ 且听我娓娓道来……一、首先，看看Nodejs的架构图http://nodejs.cn/download/ 你可以到Nodejs中文网下载Node源码。Nodejs结构大体分为三个部分：1）Nod
Nodejs 异步I/O
SK_study的博客
02-06 1904
学习 Node 异步编程，了解大型项目用 Node 作为中间层思想原理。
uniapp获取头像文件（二进制文件显示图片）
weixin_62639453的博客
08-08 238
由于在获取头像文件过程中，传递参数之后，请求成功了，但是后端给我返回了一串二进制数据流，傻傻的我，以为是乱码，跑去问后端大哥，人家跟我说这不是二进制吗，突然就觉得自己傻傻的。首先，我把他封装成一个工具，方法调用，不然每次都在页面上写一堆，因为请求头像的地方挺多。代码写的还是有些问题，还有这个方法只是其一，等发现好一点的办法再更新！
CAS5.3自定义登录校验规则
梧桐树的博客
08-04 309
前一篇文章中已经用到了这个抽象类, 这次要要做的还是改造它, 我们可以在之前的基础上来改造/*** 自定义登录拦截器*/@Setter@Override//查询用户信息//仅判断用户是否输入了自己的手机号,需要自行修改} else {throw new RuntimeException("验证码错误");} else {throw new RuntimeException("用户名或密码错误");} else {
el-table合计放在标题上方且合并列以及渲染后端返回的数据
最新发布
qq_37953045的博客
08-08 63
el-table合计放在标题上方且合并列以及渲染后端返回的数据
获取后端返回的文件流 前端进行文件下载
东小小川
08-02 559
获取后端返回的文件流 前端进行文件下载
nodejs socket.io实现多人聊天室
09-07
要实现一个多人聊天室，可以使用Node.js和Socket.io来建立服务端和客户端之间的通信。下面是大致的步骤： 1. 服务端的配置： - 使用npm安装Node.js和Socket.io。 - 创建一个Node.js的服务器，并引入Socket.io库。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值