nodeJS+express+Jade写一个局域网聊天应用(node基础)

　　为了复习一下nodeJS， 而且socketIO这东西听起来就好高端有木有， 而且有人写过了open， 也可以作为自己的参考有木有, 点击下载源代码；

　　express是4.x的版本, 跟以前的配置有些区别, 我才不管呢, 好用就好＞﹏＜;

　　按照正常的流程通过 node install 安装项目依赖, 项目的依赖如下;

  "dependencies": {
    "body-parser": "~1.8.4",
    "cookie-parser": "~1.3.3",
    "debug": "~2.0.0",
    "express": "~4.9.8",
    "jade": "~1.6.0",
    "morgan": "~1.3.2",
    "serve-favicon": "~2.1.7",
    "socket.io": "~1.2.1"
  }

　　(如果你像自己建项目的话 直接在命令行下 执行express projectName， express就会为你自动新建一个项目;)

　　先来看下高大上的服务端截图;

　　

　　

　　酷炫的客户端截图:

　　

　　客户端的主要功能是发送消息， 如果用户不输入名字后台会分配一个名字给客户端;

　　服务端的主要功能是处理用户发送的数据, 然后把数据保存到json,  同时再把当前的新数据推送到所有 , 有连接到当前socket服务器的客户端;

　　简单的服务端流程如下：

//获取对应的依赖
var express = require(‘express‘);
var path = require(‘path‘);
var favicon = require(‘serve-favicon‘);
var logger = require(‘morgan‘);
var cookieParser = require(‘cookie-parser‘);
var bodyParser = require(‘body-parser‘);
var http = require("http");
//主要就是通过socketIO的实现消息的实时推送;
var socketIo = require("socket.io");
//原生fileSystem模块,把数据保存起来的和获取数据用的;
var fs = require("fs");

....

var app = express();
var server = http.createServer(app);
//把socketIO绑定到服务上;
io = socketIo( server );
io.on(‘connection‘, function (socket) {
    //socket的各种事件写在这边;
})
//启动服务, 监听的端口设置在3000;
server.listen( 3000 , function() {
    console.log(" server is created ");
});

//使用jade模板, 以及设定视图目录;
app.set(‘views‘, path.join(__dirname, ‘views‘));
app.set(‘view engine‘, ‘jade‘);

　  服务端里面使用了封装了一个fs进行简单的文件操作，包括读取和写入的方法, 为了保存数据用的;　

　　socket主要的几个事件要知道，包括:

//这个是socketIO初始化时候的事件;
io.on(‘connection‘, function (socket) {
    //客户端发送 message给服务端的时候的事件, 用户发送过消息这个会触发;
    socket.on(‘message‘, function(msg){});
    socket.on(‘disconnect‘, function (msg) {});
    //给当前连接的客户端回传一条消息;
    socket.emit("message",{});
    //给非当前的所有用户发送推送消息;
    socket.broadcast.emit("message",{});
    //你可以给客户端发送各种事件,名字你找自己起;
    socket.emit(‘open‘,"sb");
    socket.emit(‘hehe‘,"sb");
    socket.emit(‘cnblogs‘,"sb");
});

　　所有的服务端代码(app.js)

var express = require(‘express‘);
var path = require(‘path‘);
var favicon = require(‘serve-favicon‘);
var logger = require(‘morgan‘);
var cookieParser = require(‘cookie-parser‘);
var bodyParser = require(‘body-parser‘);
var http = require("http");
var socketIo = require("socket.io");
var fs = require("fs");

var routes = require(‘./routes/index‘);
//var users = require(‘./routes/users‘);

var app = express();

// view engine setup
app.set(‘views‘, path.join(__dirname, ‘views‘));
app.set(‘view engine‘, ‘jade‘);

// uncomment after placing your favicon in /public
//app.use(favicon(__dirname + ‘/public/favicon.ico‘));
//app.use(‘port‘, process.env.PORT || 3000);
app.use(logger(‘dev‘));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, ‘public‘)));
app.use(‘/‘, routes);
//app.use(‘/users‘, users);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
    var err = new Error(‘Not Found‘);
    err.status = 404;
    next(err);
});

// development error handler
// will print stacktrace
if (app.get(‘env‘) === ‘development‘) {
    app.use(function(err, req, res, next) {
        res.status(err.status || 500);
        res.render(‘error‘, {
            message: err.message,
            error: err
        });
    });
};

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render(‘error‘, {
        message: err.message,
        error: {}
    });
});
var server = http.createServer(app);
/*
var server = http.createServer(function(req, res){
    res.end("hehe");
});
 */
io = socketIo( server );

var clients = {};
var appUtil = require("util")._extend({},{
    getRandomId : function() {
        var i=0;
        i++;
        return function() {
            return "name"+(i++);
        }
    }(),
    read : function( callback ) {
        /*
         *   data.json保存的数据结构为 { key:[] Array };
         * */
        fs.readFile("data/data.json",function(err,data){
            data = data.toString();
            callback( JSON.parse(data).key );
        });
    },
    write : function( writeData ,callback ) {
        //读取数据并重写数据;
        this.read(function(data) {
            //我这个node读取单个json会返回一个a字符串，我就笑了，什么情况
            // 如果你直接把json放在数组里面就没有这个问题;
            //data = data[0] === "a" ? data.slice(1) : data;
            data.push( writeData );
            var temp = {
                key : data
            };
            fs.writeFileSync("data/data.json",JSON.stringify(temp));
            callback()
        });
    }
});

/*
 *   @desc WebSocket API, 端口3000, msg为对象:
 *   @param {  } 传递空对象会返回 {msg : 读取文件的结果 JSON, name : 随机的一个name};
 *   @param { name : "xx" , type : "get" , msg :  string }; //msg 读取文件的结果, type获取的类型
 *   @param { name : "xx" , type : "add" , msg : string }; //type 是 add为 添加, msg是指要添加的消息;
 */

 io.on(‘connection‘, function (socket) {
     socket.emit(‘open‘,"laile");//通知客户端已连接

     // 这个闭包内的工具方法;
     var sendMessage = function(name) {
         appUtil.read(function(data) {

             //给当前连接的用户发送sock消息
             socket.emit("message",{
                 name : name,
                 msg : data
             });
             //给非当前的所有用户发送消息;
             socket.broadcast.emit("message",{
                 name : name,
                 msg : data
             });
         });
     };

     socket.on(‘message‘, function(msg){
        console.log("来消息了");
        console.log(msg);
        //如果是没有name的,我们会分配一条name给用户;
         var name = msg.name || appUtil.getRandomId();

        if(!msg.name) {
            sendMessage( name );
            clients[name] = true;
        }else if(msg.type == "get") {
            sendMessage(name);
        }else if( msg.type == "add" ) {
            //我勒个去，因为readFile和appendFile是异步的, 所以要添加回调, 当然， 你可以用同步的readFileSync;
            appUtil.write({ time : new Date().toString(),  "name" : msg.name,  "msg" : msg.msg}, function(){
                sendMessage(name);
            });
        };

         //如果是新用户的话, 广播一条叫做新用户登陆的信息;
         console.log(name)
         if(!clients[name]) {
             clients[name] = true;
             console.log("广播新用户登录的消息");
             //注意 : 这个是socket,不是msg;
             socket.broadcast.emit("refreshUser",name);
         };
     });

     socket.on(‘disconnect‘, function (msg) {});
});

server.listen( 3000 , function() {
    console.log(" server is created ");
});

module.exports = app;

　　客户端的代码你要引用socket.io模块下的socket.io/socket.io.js, 你通过 new WebSocket("ws://127.0.0.1") 一直会提示错误, 错误消息如下：

WebSocket connection to ‘ws://127.0.0.1/‘ failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED

　　然后通过socket.io这个库给我们提供的方法进行连接（我也不知道为什么这个可以连接，使用new WebSocket反正是连接不了）：

var ws = io.connect(‘http://localhost:3000‘);

　　客户端的代码如下：

var ws = null;
var name = "";

var Ws = function(url) {
    /*
    只能说呵呵了, 使用new WebSocket无法连接到服务器, 提示握手前断开连接;
    if(!window.WebSocket)
        return null;
    var ws = new WebSocket( ‘ws:‘ + window.location.href.substring(window.location.protocol.length) );
    */
    var ws = io.connect(‘http://localhost:3000‘);
    ws.on(‘open‘,function(data) {
        log(data);
        ws.send({});
    });

    ws.on("refreshUser", function(msg){
        $("<div></div>").html( msg+"登陆了哇" ).appendTo( $("#users") );
    });

    // socketIo连接开始握手的消息在chrome开发工具的请求中可以看到,
    // 握手以后的消息传送无法截取;
    ws.on("message", function(data) {
        $("#output").html(" ");
        name = data.name;
        $("#name").val(data.name);
        var arr = data.msg;
        while( s = arr.shift() ) {
            log( s );
        };
        window.scrollTo(0, 100000);
    });

    var sendMessage = function(msg){
        ws.send(msg);
    };

    return ws;

    function log(s,e) {
        var output = document.getElementById("output");
        var p = document.createElement("p");
        p.style.wordWrap = "break-word";
        p.style.padding="10px";
        p.style.background="#eee";
        p.innerHTML = s.name + " at " + (new Date(s.time)).toDateString() + " :<br>==>> <b>"+ s.msg +"</b>";
        output.appendChild(p);
    };
};
function init() {
    ws = Ws();
    if(ws === null) {
        alert("不支持webSocket!");
    };

    $("#ipt").keydown(function(e) {
        var e = e || window.event;
        if (e.keyCode === 13) {
            var msg = $(this).val();
            if (!msg) return;
            ws.send({
                type : "add",
                msg : msg,
                name : $("#name").val()
            });
            $(this).val(‘‘);
        };
    });
};

window.onload = init;

　　jade这个模板和express的路由什么的就不说了, 自己写个两行就懂了， 教程那么多， imooc屌炸天是不是哇, 明天复习JAVASCRIPT搞基程序设计3, 你懂的;

　　

　　捐给给钱,这个我的支付宝账号:mayun.taobao.com;

时间： 2024-10-11 06:17:22

nodeJS+express+Jade写一个局域网聊天应用(node基础)的相关文章

nodejs+express+jade安装备忘

安装步骤 1.安装nodejs,比如安装在E:\nodejs. 确保有两个环境变量 用户环境变量:C:\Users\Administrator\AppData\Roaming\npm 系统环境变量:e:\nodejs 2.安装Express,用稳定版3.5.0,网上资料也大多以这个版本为主,不指定版本的话,默认安装最新版 运行cmd -> npm install -g [email protected] 如果是4.X版本,再安装npm install -g express-generator 3

webstorm创建nodejs + express + jade 的web 项目

webstorm创建nodejs + express + jade 的web 项目 前简单了解过nodejs,觉得用nodejs来做个网站也太麻烦了,要自己拼html的字符串返回,这能做网站嘛? 最近看到使用jade模板来开发,觉得挺新奇的,于是试了一把,也了解了一些特性,算是个新的开始吧. 1.首先下载webstorm,百度一下,有绿色版. 2.下载express模块和jade模块,就不详细说了.然后新建一个项目,选择nodejs express app 然后点击创建即可,一个可以运行的小栗子

vue+nodejs+express+mysql 建立一个在线网盘程序

vue+nodejs+express+mysql 建立一个在线网盘程序 目录 vue+nodejs+express+mysql 建立一个在线网盘程序 第一章 开发环境准备 1.1 开发所用工具简介 1.2 安装 MySQL 1.2.1 下载安装 MySQL 1.2.2 可能出现的问题和解决方案 1.3 安装 vue-cli 1.4 安装 express 第二章 数据库设计和创建 2.1 数据库和表设计 2.2 user 表 2.3 file 表 2.4 创建数据库和表所用 sql 语句参考 第三

node+express+jade搭建一个简单的&quot;网站&quot;

1.建立工程文件夹:my_jade 2.下载express和jade包到本地.我个人不喜欢下载成全局的,我喜欢下到工程文件夹中去. 3.建立相关的文件夹和文件. index.js: style.css gys.jade代码: index.jade: layout.jade app.js 运行app.js:node app.js; 在浏览器中预览: 在看一个不使用页面布局的例子: 修改index.js 修改app.js 运行app.js在浏览器中预览: 单击提交 会触发ajax. 过几天补上.睡觉

nodejs+express+jade配置

安装步骤 一.首先可跟着这个网址安装http://jingyan.baidu.com/article/91f5db1b2bb6941c7f05e33c.html,路径可由自己定. 二.同时参考http://www.cnblogs.com/pigtail/archive/2013/01/08/2850486.html 三.以上两个链接的参考见下 1.安装nodejs,比如安装在E:\program files\nodejs(这是本人的安装路径). 确保有两个环境变量 用户环境变量:C:\Users

nodejs+express +jade模板引擎 新建项目

先 安装 nodejsiDEAAM 2015/7/16 22:47:25然后安装 npm install expressiDEAAM 2015/7/16 22:47:35然后安装 npm install -g express-generator 然后 express myapp 然后 npm start 使用浏览器访问地址:http://localhost:3000/可以看到:ExpressWelcome to Express

用python写一个微信聊天机器人

# -*- coding: utf-8 -*- """ package.module ~~~~~~~~~~~~~~ 一个微信机器人程序 微信客户端itchat: http://itchat.readthedocs.io/ 机器人聚合API: ## params - info 发给机器人的信息 - dtype json|xml - loc 地点 - userid 1-32位,可以用于上下文关联 http://op.juhe.cn/robot/index?info=%E5%8C%

简单 《实现局域网聊天室》----待更新...

先运行一个java写的局域网聊天,效果图如下 后使用c#图形修改如下: c#代码: servlet服务端 using System; using System.Collections.Generic; using System.Drawing; using System.Windows.Forms; using System.Net; using System.Net.Sockets; using System.Threading; using System.IO; using System.T

QT实现局域网聊天工具

三年多以前刚学习QT写的一个局域网聊天工具小项目. 由于是初学QT时写的,代码比较简略,也没时间好好整理项目,仅供大家参考相关TCP以及UDP的连接与传输功能   以及相关控件的基本使用方法. 需要源码学习的留下邮箱~ 1. 客户端程序函数说明 //连接服务器: tcpSocket = new QTcpSocket(this); tcpSocket->connectToHost(serverIP,8000); //断开服务器: tcpSocket->disconnectFromHost();