玩转NODE.JS(四)-搭建简单的聊天室的代码

Nodejs好久没有跟进了,最近想用它搞一个聊天室,然后便偶遇了socket.io这个东东,说是可以用它来简单的实现实时双向的基于事件的通讯机制。我便看了一些个教程使用它来搭建一个超级简单的聊天室。

初始化项目

在电脑里新建一个文件夹,叫做“chatroom”,然后使用npm进行初始化:

$ npm init

然后根据提示以及相关信息一步一步输入,当然也可以一路回车下去,之后会在项目里生成一个package.json文件,里面的信息如下:

$ cat package.json
{
 "name": "chatroom",
 "version": "1.0.0",
 "description": "a room which lets people chat",
 "main": "index.js",
 "scripts": {
  "test": "nothing"
 },
 "author": "voidy",
 "license": "ISC",
 }

这个文件描述了项目的相关信息。

安装socket.io

接下来,安装socket.io:

 $ npm install socket.io --save

安装Socket.IO的时候,--save参数用于保存模块依赖信息到package.json文件,安装完后,打开package.json文件会看到里面多了一项内容:

 "dependencies": {
   "socket.io": "^1.2.1"
 }

同时Socket.IO安装在了node_modules文件夹下。

实现聊天-服务器端

首先我们来编写服务器端程序,新建文件“index.js”,在里面导入如下模块:

 var http = require('http');
 var socketio = require('socket.io');
 var fs = require('fs'); 

第一行是导入http模块,先前我们已经见过了,用于创建http server。

第二行是导入socket.io模块,实现实时聊天必备的,不再赘述。

第三行是导入fs模块,用于读取文件。具体的一会你就会了解到。

通过http模块创建app,在刚刚的代码中加入如下语句:

var app = http.createServer(function(req, res) {

  fs.readFile(__dirname + '/index.html', function (err, data) {
    if (err) {
      res.writeHead(500);
      return res.end('Error loading index.html');
    }
    res.writeHead(200);
    res.write(data);
    res.end();
  });
}).listen(8888);

fs.readFile()方法用于读取文件,在这里读取的是index.html文件,也就是一会即将要编写的前端聊天室的展示页面。

第8行是返回请求的状态码,第9行是返回读取到的内容给浏览器。然后这个http server使用listen方法监听8888端口。

接下来,就是使用socket.io来实现聊天的事件了。在刚刚的index.js文件的http server下面接着创建socket.io对象。

var io = socketio(app);

然后监听connection事件,当浏览器连接到此Socket.IO服务时触发该事件:

io.on('connection', function (socket) {
  // 监听浏览器端的chat事件
  socket.on('chat', function (data) {
    console.log(data);
    io.emit('sendmsg', data);
  });
});

第4行用于将信息输入到后台的显示器,第5行用于将内容发送给客户端,为了知道服务器是否启动,我在后面又加了如下一句:

console.log("Server is running at http://localhost:8888")

至此,服务器端编码完成。

实现聊天-客户端

首先实现界面部分,仅仅有显示消息记录以及消息发送框,代码如下:

<html>
  <head>
    <meta charset="utf-8">
    <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>
    <!-- 引入socket.io库和jQuery库 -->
    <script src="https://cdn.socket.io/socket.io-1.2.1.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
  </head>
  <body>
    <!-- 显示消息记录 -->
    <ul id="messages"></ul>

    <!-- 消息发送框 -->
    <div id="form">
      <input id="m" autocomplete="off" /><button id="send">Send</button>
    </div>
  </body>
</html>

然后需要在里面加上JS来实现与服务器端的通信,将服务器端获取的数据展示到客户端,主要代码如下:

<script>
// 连接到Socket.IO服务器
var socket = io.connect();

$(function() {
 // 绑定发按钮发送消息的事件
  $('#send').on('click', function() {
    var data = $('#m').val();
   // 创建chat事件并发送消息给服务器
    // emit('event') 表示发送了一个event命令
    // 使用io.on('event')接收对应事件的信息
    // 所以客户端服务器端需要使用socket.on('chat')接收聊天信息
    socket.emit('chat', { msg: data });
    $('#m').val('');
  });
});

$(function() {
  // 接收消息并显示到消息记录框中
  socket.on('sendmsg', function(msg) {
    $('#messages').append($('<li>').text(msg.msg));
  });
});
</script>

此时,可以执行:

$ node index.js

然后在浏览器打开localhost:8888查看效果。

至此,一个简陋的聊天室就实现了,有兴趣的朋友可以在此基础上进行扩展,实现功能更为复杂的聊天室。

项目源代码:源码下载

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2016-11-08

基于javascript、ajax、memcache和PHP实现的简易在线聊天室

在线聊天室(online chatrooms)是一个共多人进行沟通交流的网络平台,随着越来越多的新技术的发明和成熟运用,在线聊天室也出现使用各种不同技术的, 这篇文章我想简单总结一下. 首先说一下前台技术,最新的当然是基于HTML5的websocket,它实现了浏览器与服务器全双工通信(full-duplex).WebSocket通信协议于2011年被IETF定为标准 RFC 6455,WebSocketAPI被W3C定为标准.在WebSocket API中,浏览器和服务器只需要做一个握手的动作

使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室

一,利用Node搭建静态服务器 这个是这个项目的底层支撑部分.用来支持静态资源文件像html, css, gif, jpg, png, javascript, json, plain text等等静态资源的访问.这里面是有一个mime类型的文件映射. mime.js /** * mime类型的 map * @ author Cheng Liufeng * @ date 2014/8/30 * 当请求静态服务器文件的类型 html, css, gif, jpg, png, javascript,

Ajax PHP JavaScript MySQL实现简易无刷新在线聊天室

为更好的运用这两天学到的Ajax的相关的知识,就做了个简单的在线网络聊天室. 思路 实现聊天室,基本上就是通过Ajax来传递数据,让PHP来实现对数据的差入和查找,再交给前端JavaScript实现页面的更新,达到即时聊天的功能. 消息显示区 消息显示区就是一个DIV块,我们会借助Ajax获取到服务器端信息之后,使用JavaScript来更新页面. <h3>消息显示区</h3> <div id="up"> </div> <hr /&

js编写简单的聊天室功能

这个聊天室写的特别简易,比较适合刚开始学习js的同学借鉴,当然,写的不好,也希望诸位大神可以进行批评改正. 聊天室要求: 1.不能发空消息 2.敏感字***显示 3.图片替换 开心,尴尬 4.显示聊天内容和时间 5.每发一条信息,随机显示名称,先把一些名称定义到array里面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> &

JavaScript仿聊天室聊天记录

本文实例为大家分享了js仿聊天室聊天记录的具体代码,供大家参考,具体内容如下 参考样式(css自定义聊天窗口样式):http://xiazai.jb51.net/201612/yuanma/css3chatstyle(jb51.net).rar 功能描述: 1. 用户在微信公众号里发送内容,参与活动 2. 后台提供类似聊天室的窗口显示用户实时发布的内容 界面截图: 代码: body { padding: 0; margin: 0; background: -moz-linear-gradient

Node.js制作简单聊天室

看了TCP的有关知识,写了个基于NET的聊天室. var net = require('net'); var count = 0, users = {}; var server = net.createServer(function (conn) { console.log('连接到'); conn.write( "\r\n > welcome to node-chat!" + "\r\n > " + count + " other peopl

nodejs实现的一个简单聊天室功能分享

今天我来实现一个简单的聊天室,后台用nodejs, 客户端与服务端通信用socket.io,这是一个比较成熟的websocket框架. 初始工作 1.安装express, 用这个来托管socket.io,以及静态页面,命令npm install express --save,--save可以使包添加到package.json文件里. 2.安装socket.io,命令npm install socket.io --save. 编写服务端代码 首先我们通过express来托管网站,并附加到socke

AngularJS+Node.js实现在线聊天室

不得不说,上手AngularJS比我想象得难多了,把官网提供的PhoneCat例子看完,又跑到慕课网把大漠穷秋的AngularJS实战系列看了一遍,对于基本的使用依然有很多说不清道不明的疑惑,于是决定通过做一个在线聊天室帮助理解.DEMO可以戳→chat room,代码可以戳→ChatRoom-AngularJS. 清晰图可以戳 http://files.jb51.net/file_images/article/201508/201508281040051.gif 功能 着手开发之前,首先明确一

Node.js利用Net模块实现多人命令行聊天室的方法

这篇文章介绍的是Node.js利用Net模块实现命令行式的多人聊天室,下面话不多说,来看看详细的介绍吧. 1.net模块基本API 要使用Node.js的net模块实现一个命令行聊天室,就必须先了解NET模块的API使用.NET模块API分为两大类: Server和Socket类.工厂方法. Server类如下图所示: net.Server类可以用来创建一个TCP或本地服务器,继承了EventEmitter. Socket类如下: net.Socket类一般用创建一个socket客户端或者是ne

Node.js中使用socket创建私聊和公聊聊天室

先给大家展示效果图: 在上篇文章给大家介绍使用Angular和Nodejs.socket.io搭建聊天室及多人聊天室,本文继续介绍Node.js中使用socket创建私聊和公聊聊天室,具体详情请看下文吧. nodejs的应用中,关于socket应该是比较出彩的了,socket.io在github上有几万人的star,它的成功应该是不输于express的,为了方便了解整个socket.io的使用. 例子请点击http://chat.lovewebgames.com/ 源码下载https://git

node.js中ws模块创建服务端和客户端,网页WebSocket客户端

首先下载websocket模块,命令行输入 npm install ws 1.node.js中ws模块创建服务端 // 加载node上websocket模块 ws; var ws = require("ws"); // 启动基于websocket的服务器,监听我们的客户端接入进来. var server = new ws.Server({ host: "127.0.0.1", port: 6080, }); // 监听接入进来的客户端事件 function webs

node.js中使用socket.io制作命名空间

如果开发者想在一个特定的应用程序中完全控制消息与事件的发送,只需要使用一个默认的"/"命名空间就足够了.但是如果开发者需要将应用程序作为第三方服务提供给其他应用程序,则需要为一个用于与客户端连接的socket端口定义一个独立的命名空间. io.of(namespace) 制作两个命名空间 chat和news然后在客户端相互发送信息. 复制代码 代码如下: var express=require("express"); var http=require("h

node.js中express模块创建服务器和http模块客户端发请求

首先下载express模块,命令行输入 npm install express 1.node.js中express模块创建服务端 在js代码同文件位置新建一个文件夹(www_root),里面存放网页文件等,就可以在浏览器中访问了 var express = require("express"); var path = require("path"); var app = express(); //目录 (当前目录下的www_root目录) app.use(expre

node.js中的socket.io入门实例

关于websocket等反向ajax技术介绍 在实时web应用中,常见的方法是反向Ajax.反向Ajax的定义: 反向Ajax(Reverse Ajax)本质上则是这样的一种概念:能够从服务器端向客户端发送数据.在一个标准的HTTP Ajax请求中,数据是发送给服务器端的,反向Ajax可以某些特定的方式来模拟发出一个Ajax请求,这些方式本文都会论及,这样的话,服务器就可以尽可能快地向客户端发送事件(低延迟通信). 反向Ajax技术主要有两点内容:一是服务器端保持住TCP连接直到其有数据发送给客

node.js中使用socket.io的方法

使用socket.io的使用创建一个socket.io服务器即可.但是该服务器依赖于一个已经创建的http服务器. 在http服务器运行之后,使用listen方法为该http服务器附加一个socket.io服务器. 复制代码 代码如下: var sio=require("scoket.io"); var socket=sio.listen(server); socket就是在server基础上创建的一个socket.io服务器. 当客户端与服务器端建立连接时,触发socket.io服务

node.js中的Socket.IO使用实例

1. 简介 首先是Socket.IO的官方网站:http://socket.io 官网非常简洁,甚至没有API文档,只有一个简单的"How to use"可以参考.因为Socket.IO就跟官网一样简洁好用易上手. 那么Socket.IO到底是什么呢?Socket.IO是一个WebSocket库,包括了客户端的js和服务器端的nodejs,它的目标是构建可以在不同浏览器和移动设备上使用的实时应用.它会自动根据浏览器从WebSocket.AJAX长轮询.Iframe流等等各种方式中选择最

node.js中TCP Socket多进程间的消息推送示例详解

前言 前段时间接到了一个支付中转服务的需求,即支付数据通过http接口传到中转服务器,中转服务器将支付数据发送到异构后台(Lua)的指定tcp socket. 一开始评估的时候感觉蛮简单的,就是http server和tcp server间的通信,不是一个Event实例就能解决的状态管理问题吗?注册一个事件A用于消息传递,在socket连接时注册唯一的ID,然后在http接收到数据时,emit事件A:在监听到事件A时,在tcp server中寻找指定ID对应的socket处理该数据即可. 尽管n

Node.js websocket使用socket.io库实现实时聊天室

认识websocket WebSocket protocol 是HTML5一种新的协议.它实现了浏览器与服务器全双工通信(full-duple).一开始的握手需要借助HTTP请求完成. 其实websocket 并不是很依赖Http协议,它也拥有自己的一套协议机制,但在这里我们需要利用的socket.io 需要依赖到http . 之前用java jsp写过一个聊天,其实实现逻辑并不难,只是大部分时间都用在UI的设计上,其实现原理就是一个基于websocket的通信,要想做一个好的聊天室,我觉得大部

node.js中的socket.io的广播消息

在多个客户端与服务器端建立连接后,socket.io()服务器具有一个sockets属性,属性值为所有与客户端建立连接的socket对象.可以利用该对象的send方法或emit方法向所有客户端广播消息. io.sockets.send("user commected); io.socket.emit("login",names); 案例 server.js代码: 复制代码 代码如下: var express=require("express"); var