聊天应用亲自尝试一之基础篇

看了socket.io官网的案例,想自己照猫画虎完成以便,已达到深入理解和练习的目的。

使用web框架 express

首要目标是建立一个简单的HTML页面,包括一个表单和一个消息列表,我们将使用Node.JS web 框架 express 去搭建。请先确保Node.JS 已经安装。

现在我们一步一步完成express的安装:(有个中文网站)

创建一个目录,然后进入此目录并将其作为当前工作目录:

通过 npm init 命令为你的应用创建一个 package.json 文件。 欲了解 package.json 是如何起作用的,请参考 Specifics of npm’s package.json handling。

此命令将要求你输入几个参数,例如此应用的名称和版本。 你可以直接按“回车”键接受默认设置即可,下面这个除外:

键入 app.js 或者你所希望的名称,这是当前应用的入口文件。如果你希望采用默认的 index.js 文件名,只需按“回车”键即可。

接下来安装 Express 并将其保存到依赖列表中:

我们看到了一个node_modules文件生成出来,这就是我们需要的。

如果只是临时安装 Express,不想将它添加到依赖列表中,只需略去 --save 参数即可:

安装 Node ??槭?,如果指定了 --save 参数,那么此??榻惶砑拥?package.json 文件中 dependencies 依赖列表中。 然后通过 npm install 命令即可自动安装依赖列表中所列出的所有???。

现在我们在index.js这个入口文件中,输入以下代码:

运行 node index.js

命令行输出:

紧接着我们用浏览器访问http://127.0.0.1:3000

20160628102756

 

制作html文件并渲染

我们该创建一个独立的html文件来包含我们的样式和布局

创建一个index.html

改写index.js入口文件

上面我们使用sendFile渲染模板,使其访问路由并正确加载index.html.

重启进程(ctrl+C并再次运行node index)并且刷新浏览器.

20160628121528

加入Socket.io

socket.io有两个部分组成:(?官网)

1.服务器端供node使用的socket???/p>

2.客户端使用的js包

下一步我们需要安装node要使用的socket.io???/p>

上面的命令将安装socket.io???,并将它写入配置文件package.json。下面我们修改我们的index.js:

注意,我通过使用http(http服务器)对象来初始化一个socket.io实例。接着监听socket连接事件,并将它输出到控制台。

然后在index.html</body>之前加入以下片段:

客户端加载socket.io-client,在全局调用io()并连接服务端。

注意,当我们调用io()时没有指定任何一个URL,因为它默认去尝试连接主机。

如果你现在重载服务器和客户端,控制台打印“a user connected”。

尝试打开多个页面,你将看到如:

20160628203455

每个socket也触发特殊的disconnect事件。也就是断开的事件

当你关闭一个页面你会看到

20160628203911

 

发送信息

Socket.IO背后的主要思想是:你可以发送和接收任何你想要的事件和数据。任何被编码为JSON的对象,二进制数据也支持。

我们现在模拟用户在客户端输入一条消息,服务器获取消息??突Ф嘶岫ㄒ逡桓鯿hat message事件emit发送到服务器端,服务器端接收chat message事件。html中代码如下:

同时在index.js中接收chat message事件,并打印消息:

看看效果吧:

20160628232026

 

通知客户端

下一步就是服务器接收消息,并把消息发送给其他用户。

为了发送给每一个人,Socket.IO提供io.emit了给我们,现在为了简单起见,我们发送消息给每个人,包括发送者自己。以下是服务器端代码

客户端我们捕获chat message事件??突Ф巳康?JavaScript 代码如下:

最终效果如下

20160628234000

发表评论