socket.io 快速入门教程——聊天应用
2018-02-09 17:21
786 查看
转自：https://www.w3cschool.cn/socket/socket-ulbj2eii.html
定义了一个路由
使 http 服务器监听端口 3000。
运行
在浏览器中访问
一个加载到浏览器中的客户端：
开发环境下，
尝试打开多个标签页，可以看到多条信息：
每个 socket 还会触发一个特殊的
添加昵称
不要将消息发送给服务器后再返回给发送者，应该在用户按下回车后立即将消息显示到消息列表。
添加 “{用户} 正在输入” 功能
显示在线用户
添加私密消息
分享你的改进！
简介
使用流行的 web 应用技术栈 —— 比如 LAMP (PHP) —— 来编写聊天应用通常是很困难的。它包含了轮询服务器以检测变化，还要追踪时间戳，并且这种实现是比较慢的。大多数实时聊天系统通常基于 socket 来构建。 Socket 为客户端和服务器提供了双向通信机制。这意味着服务器可以 推送 消息给客户端。无论何时你发布一条消息，服务器都可以接收到消息并推送给其他连接到服务器的客户端。web 框架
首先要制作一个 HTML 页面来提供表单和消息列表。我们使用了基于 Node.JS 的 web 框架express。 请确保安装了 Node.JS。首先创建一个
package.json来描述我们的项目。 推荐新建一个空目录 （这里使用
chat-example）。
{
"name": "socket-chat-example",
"version": "0.0.1",
"description": "my first socket.io app",
"dependencies": {}
}要保存 dependencies信息， 可以用
npm install --save：
npm install --save express@4.15.2express 已经安装好了。我们现在新建一个
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');
});这段代码作用如下：Express 初始化 app作为 HTTP 服务器的回调函数 （见第 2 行）。
定义了一个路由
/来处理首页访问。
使 http 服务器监听端口 3000。
运行
node index.js就可以看到如下画面：
在浏览器中访问
http://localhost:3000：
HTML 服务器
目前在index.js中我们是通过
res.send返回一个 HTML 字符串。 如果我们将整个应用的 HTML 代码都放到应用代码里，代码结构将变得很混乱。 替代的方法是新建一个
index.html文件作为服务器响应。现在我们用
sendFile来重构之前的回调：
app.get('/', function(req, res){
res.sendFile(__dirname + '/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>现在重启进程 （按 Control+C ，然后再次运行 node index） ，刷新页面显示如下：
集成 Socket.IO
Socket.IO 由两部分组成：一个服务端用于集成 (或挂载) 到 Node.JS HTTP 服务器：socket.io
一个加载到浏览器中的客户端：
socket.io-client
开发环境下，
socket.io会自动提供客户端。正如我们所见，到目前为止，我们只需要安装一个模块：
npm install --save 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(__dirname + '/index.html'); });
io.on('connection', function(socket){
console.log('a user connected');
});
http.listen(3000, function(){
console.log('listening on *:3000');
});
http（HTTP 服务器） 对象初始化了
socket.io的一个实例。 然后监听
connection事件来接收 sockets， 并将连接信息打印到控制台。在 index.html 的
</body>标签中添加如下内容：
<script src="/socket.io/socket.io.js"></script> <script> var socket = io(); </script>这样就加载了
socket.io-client。 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部分现在应该内容如下：
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>
$(function () {
var socket = io();
$('form').submit(function(){
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
});
</script>在 index.js中打印出
chat message事件：
io.on('connection', function(socket){
socket.on('chat message', function(msg){
console.log('message: ' + msg);
});
});结果应该如以下视频所示：广播
接下来的目标就是让服务器将消息发送给其他用户。要将事件发送给每个用户，Socket.IO 提供了io.emit方法：
io.emit('some event', { for: 'everyone' });要将消息发给除特定 socket 外的其他用户，可以用 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事件，并将消息添加到页面中。现在客户端代码应该如下：
<script>
$(function () {
var socket = io();
$('form').submit(function(){
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
socket.on('chat message', function(msg){
$('#messages').append($('<li>').text(msg));
});
});
</script>就这样，聊天应用就完成了，大约只有 20 行代码！ 最终效果如下：课外练习
下面是一些可以做的优化：当用户连接和断开连接时广播消息添加昵称
不要将消息发送给服务器后再返回给发送者，应该在用户按下回车后立即将消息显示到消息列表。
添加 “{用户} 正在输入” 功能
显示在线用户
添加私密消息
分享你的改进！
获取示例
可以从 GitHub 获取。$ git clone https://github.com/socketio/chat-example.git[/code]
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Node+Express+MongoDB+Socket.io搭建实时聊天应用实战教程(一)--MongoDB入门
- Node+Express+MongoDB + Socket.io搭建实时聊天应用实战教程(三)--前后端环境配置
- Node+Express+MongoDB + Socket.io搭建实时聊天应用实战教程(二)--node解析与环境搭建
- [转]Ultra Fractal教程系列06——快速入门教程03——应用着色算法
- 【自己的整理】socket.io官方demo|创建简单的聊天应用
- socket.io+angular.js+express.js做个聊天应用(三)
- 使用express + socket.io实现多房间聊天应用
- socket.io学习教程之基本应用（二）
- socket.io+angular.js+express.js做个聊天应用(二)
- centOS下通过NPM安装和配置node.js+socket.io+connect在线聊天的详细教程
- socket.io入门整理教程
- socket.io 入门教程
- socket.io+angular.js+express.js做个聊天应用(四)
- socket.io+angular.js+express.js做个聊天应用(一)
- socket.io系列二 聊天应用
- 快应用quickapp快速入门教程 by五个半柠檬2 3ff0
- socket.io+angular.js+express.js做个聊天应用(三)
- Node+Express+MongoDB + Socket.io搭建实时聊天应用
- socket.io+angular.js+express.js做个聊天应用(四)
- Hadoop基础教程-第2章 Hadoop快速入门（2.5 WordContent简单应用）