项目完整代码可以通过wget下载:
# 下载代码
wget https://labfile.oss.aliyuncs.com/courses/455/louChat.zip
# 解压缩代码
unzip louChat.zip
同样的我们需要把 app.js 中第 59 行的代码中的端口号 3000 改为 8080。然后通过以下命令即可运行项目:
$ cd louChat
$ npm install
$ node app.js
运行效果为:
多次运行,也就是在我们的 WebIDE 中多点几次工具中的 Web 服务,即可登录多人,运行效果图前已经登录了用户名分别为 1 2 3 的用户。大概知道我们需要做什么东西后,下面教大家一步一步完成我们的项目。
本课程将通过使用 Node.js 与 socket.io 搭建服务程序,配合 Angular.js 能够动态声明内容,使用 bootstrap 框架的方式完成一个简单的聊天室应用。
选用 socket.io 是因为其封装了 WebSocket ,良好的兼容性,可以在不同的浏览器和移动设备上构建实时应用,非常方便和人性化。
通过从 npm init 指令开始,一步步实现所有功能。
1.1 package.json 配置文件
首先新建一个文件夹 louChats,作为项目的根目录,同时也是我们的项目名称,然后执行命令 - cd louChats && npm init
会出现许多配置项需要你输入,同时这一过程也是引导你创建一个 package.json 文件,完成配置项填写后,此文件就存在根目录 /louChats 下了。
项目需要 Express 框架托管服务程序,还需要 socket.io 建立实时服务:
执行命令 npm install --save express 安装 Express;
执行命令 npm install --save socket.io 安装 socket.io。
在 /louChats 下新建 app.js 文件作为服务端主程序文件,敲入代码:
var express = require("express");
var app = require("express")();
var http = require("http").createServer(app);
var io = require("socket.io")(http);
// 设置静态文件路径
app.use(express.static(__dirname + "/client"));
app.get("/", function (req, res) {
res.sendfile("index.html");
});
var connectedSockets = {};
var allUsers = [{ nickname: "" }];
io.on("connection", function (socket) {
//有新用户进入聊天室
socket.on("addUser", function (data) {
// coding there ...
});
//有用户发送新消息
socket.on("addMessage", function (data) {
// coding there ...
});
//有用户退出聊天室
socket.on("disconnect", function () {
// coding there ...
});
});
http.listen(8080, function () {
console.log("app is running at port 8080 !");
});
执行命令 npm install --save express 安装 Express;
执行命令 npm install --save socket.io 安装 socket.io。
在 /louChats 下新建 app.js 文件作为服务端主程序文件,敲入代码:
var express = require(“express”);
var app = require(“express”)();
var http = require(“http”).createServer(app);
var io = require(“socket.io”)(http);
// 设置静态文件路径
app.use(express.static(__dirname + “/client”));
app.get("/", function (req, res) {
res.sendfile(“index.html”);
});
var connectedSockets = {};
var allUsers = [{ nickname: “” }];
io.on(“connection”, function (socket) {
//有新用户进入聊天室
socket.on(“addUser”, function (data) {
// coding there …
});
//有用户发送新消息
socket.on(“addMessage”, function (data) {
// coding there …
});
//有用户退出聊天室
socket.on(“disconnect”, function () {
// coding there …
});
});
http.listen(8080, function () {
console.log(“app is running at port 8080 !”);
});
copy
在上面的代码中设置了三个事件监听代码:
客户端
创建目录:
louChats
|--client
| |--assets
| | |--js
| | | `--client.js
| | |--css
| | `--index.css
| |--index.html
| |--message.html
| `--user.html
`--app.js
/louChats/client 目录下是静态资源文件和客户端页面文件,其中的 client.js 就是客户端的负责监听服务端请求的文件。
3.1 使用 bootstrap 和 jquery
使用 bootstrap 快速实现布局良好的界面,首先执行命令 - sudo npm install -g bower 安装 bower,
在 /louChats/client/assets 目录下执行命令 - bower install bootstrap#3.3.5即可。
在 /louChats/client/assets 目录下执行命令 - bower install angular即可。
编辑 /louChats/client/index.html 文件:
mychat
Online{
{users.length-1}}
{
{receiver?receiver:"Group-chat"}}