今天我们主要看一下Socket.IO实时通讯,先看一下界面。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
|
这就是聊天界面,左边是聊天内容,右边是参加聊天的用户。要实现这个聊天,之前我们在博客中提到了SingalR,可以用于ASP.NET,WinForm以及WPF。今天我们要使用Node.js平台上的Socket.IO.js。首先要在项目中引用这个扩展包。
安装好之后,在Package.json中就会自动加入这个包,管理起来。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
|
我在这里还使用的是老版本,哈哈,OK,老版本新版本都能用。我们进入主题,在第一篇环境搭建中,我就说了我们的启动入口是www文件。
在www文件中,我们初始化了SocketIO的一些东西。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
|
在这里当客户端有用户进入聊天时,就会发射joinchat事件,后台就会触发joinchat事件。当客户端和服务端建立连接时,服务端就会发射广播joinchat,所有连接的客户端都会收到这个广播,悄无声息刷新界面。当客户端用户失去连接(关闭浏览器)时,就会自动发射disconnect事件,服务端就会触发disconnect事件,并将结果广播到各个客户端,客户端自动刷新页面。当用户unload该页面时,会触发leftchat。当客户端发信息时,就会触发message事件,将该用户的消息发送到其他人。这个聊天界面的过程就是这样,很简单。
接下来我们来看一下客户端代码。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
|
当用户进入这个页面时,我们发射joinchat,并将当前登录用户信息发送到服务端,服务端再将该用户信息以及计算好的用户总数广播到各个客户端。注意这里我们为了提醒用户,用到了kendoNotification,效果如下,当有人进入或者离开时,会出现popup提示。
当用户离开时,如上,当用户进入时,如下
OK,接下来我们看一下最主要的部分,聊天。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
上面就是点击SEND按钮或者文本框回车发送消息的代码,后台接到message广播给客户端。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
|
其实这里不过是一个拼message的过程,如果发送者是本人,则消息靠右显示,否则靠左显示。看看James和lilei的聊天。
看到了吧,聊天聊的很Happy。OK,上面大家是不是看到了一段类似sql的代码,不错,就是将聊天信息存到本地WebSQL sqlite数据库。
1 2 3 |
|
在使用之前我们需要首先连接数据库创建表。
1 2 3 4 |
|
确实和sqlSever的语法有点像,我们看一下存储到本地webSQL的聊天记录,google Chrome,按F12
看到了吧,聊天记录已经被存储下来,由于我是一台机器,一个浏览器开两个tab页,所以这里的聊天记录就是两份,一个是发送人的,一个是接收人的。大家注意这里还有张表,sqlite_sequence,我们的主键id定义为自增列,所以这张表存储的是我们的自增列(id)的最大值。
最大是54,和我们表ChatRecords中的最大值相等。