socket.io系列二聊天应用

最新推荐文章于 2021-03-29 08:45:14 发布

哐哐来巡山

最新推荐文章于 2021-03-29 08:45:14 发布

阅读量845

点赞数

最初的打算是对应着官网进行自己的学习和翻译，可是才使用socket.io官网开始的代码写出来demo，发现网站已改版。

那么就按照新的官网进行学习了。

开始：聊天应用

这个教程中我们将会创建一个基本的聊天应用。由于它基本上不需要nodejs与socke.io的先前准备知识，因此这个教程能被各个水平段的用户看得懂。

介绍

使用传统的Web开发工具开发一款聊天应用时很困难的，比如LAMP(PHP)。困难之处在于轮询服务器的变化、跟踪时间戳，并且消息的发送接收比较慢。

Sockets是被认为最适合及时聊天系统的架构、在服务器与客户端之间进行双向通信的解决方案。

这意味着服务器可以主动推送消息到客户端。不论合适你发出聊天消息，服务器都能获知并且推送到其他在线的用户。

网站构架

第一步是创建用于消息与表单处理的服务器。服务端，我们将用nodejs的一个web框架express。开始之前，要确保nodejs已安装。

首先，创建一个名为‘chat-example’的空文件夹。在文件夹中创建‘package.json’的文件，用于描述我们的项目：

{
	"name":"socket-chat-example",
	"version":"0.0.1",
	"description":"my first socket.io app",
	"dependencies":{}
}

为了项目所依赖的模块比较容易填写在‘dependencies’，我们将使用‘npm install --save’的命令：

npm install --save express

现在‘express’已经安装，我们可以在根目录创建'index.js'文件来开始我们的项目创建：

var app = require('express')();
var http = require('http').server(app);

app.get('/',function(req,res){
	res.send('<h1>Hello world</h1>');
});

http.listen(3000,function(){
	console.log('listening on 3000');
});

解释如下：

1，‘Express’初始化赋予变量‘app’作为方法应用于HTTP服务（第二行）；

2，定义一个路由方法‘/’用做我们访问网站首页的返回结果；

3，让http服务器监听3000端口。

如果你在运行‘node index.js’，你会看到下图：

如果你在chrome中访问http://127.0.0.1:3000/，你会看到如下图所示：

服务端的HTML

到目前为止，在index.js中我们用‘res.send’方法传递HTML字符串。如果这样放整个应用的HTML的话，代码会显得杂乱。因此，我们创建一个‘index.html’文件来解决。

我们用‘sendfile’来重构路由：

app.get('/',function(req,res){
	res.sendfile('index.html');
});

‘index.html’代码如下：

<!doctype html>
<html>
  <head>
    <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>
  </head>
  <body>
    <ul id="messages"></ul>
    <form action="">
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>
  </body>
</html>

如果你重新运行程序（先命令键+C再运行‘node index’）并且刷新浏览器页面的话，你会看到如下：

Socket.io综述

Socket.io由两部分组成：

1，一个整合或者在node.js HTTP架构的服务器：socket.io

2，一个用于浏览器加载的客服端的库:socket.io-client

在开发过程中，socket.io自动连接客户端，但是我们必须要安装socket.io的模块:

npm install --save socket.io

这样socket.io就会安装并且会在‘package.json’添加对它的依赖。改变‘index.js’的代码如下：

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/',function(req,res){
	res.sendfile('index.html');
});

io.on('connection',function(socket){
	console.log('a user connected');
});

http.listen(3000,function(){
	console.log('listening on 3000');
});

我通过传递一个'http'对象初始化一个‘socket.io’的实例。然后我监听socket的‘connection’事件并且输出到面板。

在‘index.html’中增加下面的代码到‘</body>’前：

<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io();
</script>

这样页面将会加载到'socket.io-client'(暴漏‘io’给全局并连接)。

注意，当我调用'io()'的时候，我并没有制定任何URL，因为这样它将会默认的去尝试链接主机的首页。

假如你重启服务器并刷新页面，你会在命令版上看到'a user connected'。试着打开几个页面，你会看到几条信息:

每个socket将会有一个独特的‘disconnect’事件：

io.on('connection',function(socket){
	console.log('a user connected');
	socket.on('disconnect',function(){
		console.log('user disconnected');
	});
});

重启服务器后，如果你刷新一个页面几次，你将会看到如下：

发射事件

Socket.io的核心是你能发射和接收任何事件，包括带数据的事件。任何对象可以被编码成JSON，二进制也是支持的。

让我们做下面的事情：用户输入信息，服务器通过‘chat message’得到它。‘index.html’中‘script’的js代码改为如下:

<script src="/socket.io/socket.io.js"></script>
	<script src="jquery的CDN地址"></script>
	<script>
  		var socket = io();
  		$('form').submit(function(){
  			socket.emit('chat message',$('#m').val());
  			$('#m').val();
  			return false;
  		});
	</script>

（考虑到国内墙的环境，可以安装jquery模块或者引入本地jQuery）

‘index.js’中‘socket’的代码如下：

io.on('connection',function(socket){
	socket.on('chat message',function(msg){
		console.log('message：'+msg);
	})
});

重启服务器刷新页面后，在文本框中输入信息按发送，将会在命令版看到你输入的信息:

Broadcasting/广播

下个目标是发送事件从服务器到其他用户。

为了发送事件给所有的人，Socket.IO提供了'io.emit'方法：

io.emit('some event',{for:'everyone'});

如果你想发送除了自己之外的任何人，可以使用'broadcast'：

io.on('connection',function(socket){
    socket.broadcast.emit('hi');
});

这样的情况下，我们可以发送信息给任何人包括自己：

io.on('connection',function(socket){
	socket.on('chat message',function(msg){
		io.emit('chat message',msg);
	});
});

在客户端，我们可以捕获chat message事件。整个客户端的代码js代码如下：

var socket = io();
$('form').submit(function(){
 <span style="white-space:pre">	</span>socket.emit('chat message',$('#m').val());
	$('#m').val('');
  	return false;
  });
 socket.on('chat message',function(msg){
  	$('#messages').append($('<li>').text(msg));
  })

整个聊天应用只需要20行代码就实现了。

作业：

有几个想法可以改善这个聊天应用：

1,有人进入或者离开聊天室的时候通知所有的用户；

2，增加用户昵称；

3，增加‘用户正在输入’的功能；

4，显示在线用户；

5，增加私信；

6，分享你的改进。

你可以在github上得到这个示例的代码。