使用nodejs express + socket.io + jquery 制作一个极简单的聊天服务器

最新推荐文章于 2024-07-16 17:56:11 发布
最新推荐文章于 2024-07-16 17:56:11 发布
阅读量223 收藏
点赞数
分类专栏： nodejs 文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sailing2k/article/details/84322207
版权

文件：
jquery-1.7.1.min.js
socket.io.js
client.js

node.js  (放到与public同级的目录下)
index.html

 

文件结构：

 

注意：本地IP是192.168.145.10

 

 

index.html

    <html>  
      <head>  
        <script src="./public/jquery-1.7.1.min.js"></script>  
        <script src="./public/socket.io/node_modules/socket.io-client/dist/socket.io.js"></script>  
        <script src="./public/client.js"></script>  
        <style type="text/css">  
          #content { width: 600px; margin: 0 auto; }  
          textarea { width: 400px; height: 40px;}  
        </style>  
        <script>  
          $(document).ready(function() {  
             initialize();  
          });  
        </script>  
      </head>  
      <body>  
        <div id="content">  
          <h1>Micro Chat</h1>  
          <div id="status"></div>  
          <div id="thread">  
          </div>  
          <div>  
            <textarea id="text" name="text"></textarea>  
          </div>  
          <div>  
            <button id="send" οnclick="say();">Send</button>  
          </div>  
        </div>  
      </body>  
    </html>
 

 

 

node.js

 

var express = require('express');

var app = express.createServer();
var io = require('socket.io').listen(app);


app.configure(function(){
    app.use(express.bodyParser());
    app.use(express.methodOverride());
    app.use(express.logger());
    app.use(express.bodyParser());
    app.use(express.cookieParser());
    app.use(express.session({
        secret:"sdfsdfsdfjkdsf",
    }));
});

var conns = {};

io.sockets.on('connection',function(socket){
    var cid = socket.id;

    for(var ccid in conns){
        var soc = conns[ccid];
        soc.emit('join',{cid:socket.id});
    }

    conns[cid] = socket;

    socket.on('disconnect',function(){
        delete conns[cid];

        for(var cid in conns) {
            var soc = conns[cid];
            soc.emit('quit',{cid:cid});
        }

    });

    socket.on('say',function(data){
        data.cid = cid;
        for(var ccid in conns){
            var soc = conns[ccid];
            soc.emit('broadcast',data);
        }

    });
});

app.get('/',function(req,res){
    res.sendfile(__dirname + '/public/index.html');
});

app.use('/public',express.static(__dirname + '/public'));

app.listen(3000);

console.log('daemon start on http://192.168.145.10:3000');
 

 

client.js

 

var socket = io.connect("http://192.168.145.10:3000");

socket.on('quit',function(data){
    status('Client' + data.cid + 'quits!');
});

socket.on('join',function(data){
    status('Client' + data.cid + 'joins!');
});

socket.on('broadcast',function(data){
    $('#thread').append($('<div>').html('client' + data.cid + ' say:<br/>' + data.w));
});

function say() {
    var words = $('#text').val();

    if ($.trim(words)) {
        socket.emit('say',{w:words});
        $('#text').val('');
    }
}

function status(w) {
    $('#status').html(w);
}

function initialize() {
    $(document).delegate('textarea','keydown',function(evt){
        if (evt.keyCode == 13 && evt.ctrlKey) {
            $('#send').focus().click();
        }
    });
}
 

 

sailing2k
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于jQuery/express/socket.io实现的匿名聊天室
qq_42748385的博客
10-12 1031
关键词 前后端分离、template用法，jquery用法，express用法，socket.io用法, 创建房间样式，及ajax和数据库插入代码 聊天页面bug， 对时间的处理 各种意外情况的判断 cookie身份 导航栏返回自动刷新页面 倒计时 定时删除，级联删除 房间图片 分页 长轮询，轮询自行了解，joi验证介绍 滚动条 cookie身份已过期 ico图标 首页动画 前言 这个项目对之前PHP实现的匿名聊天室进行了改写，采用前后端分离开发，后端语言使用的NodeJs，并且对前...
使用 Node.js + Socket.IO 搭建简易聊天系统
Curren的博客
07-08 556
这学期选了一门短学期课程，《计算机专业课程设计》，我们需要单独完成一个完整的项目并汇报给老师。我准备借鉴 CodiMD来实现一个基于 `Node.js` 的`MarkDown`文档协同编辑平台。 在我浏览CodiMD的源码时，发现项目中实现实时协同编辑的一个关键模块是[Socket.IO]，于是先从它开始学起，这片博客是`Socket.IO`的一个入门项目，基于 `Node.js` 的聊天系统
Socket.io在线聊天室
fens的博客
08-22 276
从零开始nodejs系列文章，将介绍如何利Javascript做为服务端脚本，通过Nodejs框架web开发。Nodejs框架是基于V8的引擎，是目前速度最快的Javascript引擎。chrome浏览器就基于V8，同时打开20-30个网页都很流畅。Nodejs标准的web开发框架Express，可以帮助我们迅速建立web站点，比起PHP的...
node.js+express+socket.io+jquery+ajax+bootstrap搭建一个聊天室
冷月心的博客
02-22 664
node.js+express+socket.io+jquery+ajax搭建一个聊天室
简单socketclient和server编写
weixin_34197488的博客
08-24 237
socket连接原理图 socket server端 1 #-*- coding:utf-8-*- 2 import socket 3 4 ip_port=('127.0.0.1',9999) #客户端IP地址，想连接的端口号 5 6 ss = socket.socket() 7 ss.bind(ip_port) 8 ss.listen() 9 ...
Chat-App:一个使用Node js，Express js，Socket.io和JQuery的简单聊天应用程序
05-22
网络聊天应用一个基于Web的聊天应用程序，面向使用NodeJS，ExpressJS，Socket-IO和jQuery构建的用户。项目设置请按照以下步骤操作，以获取应用程序的本地运行副本。克隆仓库git clone ...
Real-Time-Chat-App:用于双向通信的实时聊天应用程序，使用React进行前端构建，并使用Node.js，Express和Socket.io进行后端构建
05-22
:bust_in_silhouette: 趣谈应用使用Node.js，Express和Socket.io和Vanilla JS在前端通过自定义UI与websockets进行实时聊天的应用程序 :laptop: 设置要运行此项目，请使用npm在本地安装它： 首先，请打开您的终端并...
bulk-upload-socket-io:这是一个NodeJS，Express，MySQL，Socket.IO应用程序，允许通过Web界面批量上传
04-30
设置npm安装跑步节点app.js 在可用时间内涵盖以下内容： 页面上传csv 显示结果它将上传csv 读取csv并将图像下载到新文件夹显示进度条通过express和socket.io通道进行通信mysql保存并列出批处理查询可能的建议或建议...
chatClient：使用Node.js-> Express.js和Socket.io创建的聊天客户端
02-18
在Express.js之上使用Socket.io进行实时客户端到客户端通信 使用Mlab上托管的MongoDB来存储消息 使用Materialize.css和jQuery构建的前端 使用Jasmine Testing Framework编写的测试 我喜欢制作这个xD 怎么跑？ 将...
node-chat-app:使用websockets库socket.io，Nodejs和Express创建的聊天应用程序。 还包括地理位置api和googlemaps网址api
05-26
使用websockets库socket.io，Node.js和Express构建 这是为了什么？ 供朋友，家人和/或同事实时连接并相互交流。 消息带有时间戳。 chattrbox还使用和 。 地理位置API允许用户根据需要提供其位置。 他们始终可以选择...
通过前端Jquery调用web Socket连接，并返回数据Demo
07-06
通过前端Jquery调用Web Socket服务连接，并返回数据，记得在websocket.demo.js中修改你自己的websocket连接
NodeJS+Express+socket_io 多人聊天简单Demo
03-29
NodeJS+Express+socket_io 多人聊天简单Demo
基于express/socket.io的简易聊天室
嘿嘿
04-08 254
经过三个月的努力奋斗，FreeNGUI框架现在已经进入维护阶段，也终于有点时间搞搞其他东西，左思右想，最终决定搞一个简单的聊天室。虽然网上教程众多，但还是想自己完整的跑一遍，过过手瘾。 主要涉及到以下内容： Express Node.js pug Socket.IO IndexedDB Node.js 是一个基于Chrome V8 引擎的JavaScript 运行环境。官...
用 socket.io 搭建一个简单的聊天室
weixin_44812997的博客
06-04 1027
关于websocket WebSocket是一种在单个TCP连接上进行全双工通信的协议。 WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。 谈谈我自己对websocket的认识 其实在做完聊天室这个项目后发现，有些东西没有你想象的那么复杂，关于websocket，我对它的印象，它就像一个传话的工具，比如我想对小明说“你好”，然后就会向web
socket.io实现即时通讯
分享互联网的有趣知识~
09-14 371
socket.io实现即时通讯
使用scoket.io来实现简单的及时通讯
goodtimedd的博客
06-24 379
用scoket.io实现简单的及时通讯scoket.io具有以下优点：安装创建app.js文件作为服务器在前端页面引入相关文件监听聊天功能前端应也接收和回应到页面这里是一些socket.on和socket.emit的用法 scoket.io 它适用于所有平台，浏览器或设备，并同时关注可靠性和速度 具有以下优点： 1.实时分析 将数据推送到以实时计数器，及时监听页面所有的变化，并且接收和发送给客户端数据。 2.即时通讯和聊天 Socket.IO结合node以及express实现简单的即使通讯。 3.作为服务器
socket.io实现聊天功能——第一章 、群聊
自酌一杯酒
05-28 2726
一、准备工作–搭建项目 1.确保node环境已经安好，我已将npm替换成了cnpm 淘宝镜像。 2.新建一个名为 ” chat “ 的文件夹。 3.在 ” chat “ 的文件夹里面 创建package.json的文件，我们用代码创建cnpm init,默认回车就行了。 4.再分别安装express 和 socke.io的模块。 cnpm install experss --s...
socket.io
热门推荐
我是渣渣
11-21 1万+
Socket.IO是一个WebSocket库，包括了客户端的js和服务器端的nodejs，它的目标是构建可以在不同浏览器和移动设备上使用的实时应用 socket.io的特点 易用性：socket.io封装了服务端和客户端，使用起来非常简单方便。 跨平台：socket.io支持跨平台，这就意味着你有了更多的选择，可以在自己喜欢的平台下开发实时应用。 自适应：它会自动根据浏览器从WebSocke...
vue搜索框过滤--- computed、watch区别
最新发布
学习笔记分享给大家
07-16 352
计算属性computed适用于需要基于其他数据动态变化，并且需要缓存的场景。侦听器watch适用于需要响应数据变化，执行异步或开销较大操作的场景。方法methods适用于定义组件的具体行为，包括事件处理和业务逻辑等。
nodejs如何通过socket.io实现路由转发
06-01
通过socket.io实现路由转发需要以下步骤： 1. 在服务器端安装socket.io和express框架。 2. 在服务器端创建一个http服务器，并将其绑定到socket.io。 ```javascript const app = require('express')(); const http = require('http').createServer(app); const io = require('socket.io')(http); ``` 3. 在服务器端监听客户端连接，并接收客户端的消息。 ```javascript io.on('connection', (socket) => { console.log('a user connected'); // 监听客户端发送的消息 socket.on('message', (data) => { console.log('message: ' + data); // 根据消息内容进行路由转发 switch(data.route) { case 'route1': // 处理路由1 break; case 'route2': // 处理路由2 break; // ... default: // 处理未知路由 break; } }); }); ``` 4. 在客户端使用socket.io发送消息，并在消息中指定路由。 ```javascript const socket = io(); // 发送消息 socket.emit('message', { route: 'route1', data: 'hello world' }); ``` 以上就是通过socket.io实现路由转发的基本步骤。需要注意的是，服务器端和客户端的消息格式需要保持一致，以便正确解析路由信息。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值