零基础搭建网页聊天室（socket.io使用教程）

时间 2019-11-07

标签零基础搭建网页聊天室 socket.io socket 使用教程栏目 HTML 繁體版

原文原文链接

本文实际为翻译Socket.io官方教程——《Get Started: Chat application》html

开始吧，咱们作个聊天应用！

在这个教程里，咱们将制做一个简单的网页聊天应用。它机会不要求你有任何关于Node.js或Socket.io的基础，因此这份教程适合任何水平的开发者。先看看Demo。前端

介绍

曾经写一个网页聊天应用可能会用到网页工具套件LAMP、PHP，那时候很是困难。由于客户端要不断地像服务器发送请求，查看是否有信息变化，体验起来很是慢。node

Socket通讯是传统解决实时通信的一种方案，它提供了服务器和客户端之间的双向通讯。jquery

这就意味着，服务器能够把消息推送给客户端，不管什么时候你发送了一个消息，客户端都能接受到你的消息，并将它推送给其余链接的用户。web

网站框架

咱们的第一个目标是创建起一个简单的HTML页面（提供一个提交输入信息的Form表单，和一个对话的列表）。我还还将经过Node.js的web框架express。首先，咱们须要保证电脑已经安装了Node.js（如何安装Node）。express

第一步，咱们先建立一个package.json文件，它用来描述这个项目。我推荐你把它放在一个新建的空文件夹内。（我把我新建的文件夹名叫作chat-example.）npm

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

如今，为了简单的package.json中的dependencies（依赖），咱们将使用npm install --save命令。json

npm install --save express@4.10.2

如今，咱们已经装好了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');
});

这三段代码能够解释为：服务器

Express初始化了app，让它充当一个HTTP服务器。
咱们定义了一个路由处理器／，当咱们输入网址的时候，它进入到文件根目录。
咱们让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>
    body,form,#message,li {
      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>

若是你重启了这个进程（按Ctrl/Cmd + C再输入node index.js），刷新页面就能够看到：

使用Socket.io

Socket.io由两部分组成：

一个Node.js HTTP服务器的应用socket.io（此处原文为：A server that integrates with (or mounts on) the Node.JS HTTP Server: socket.io）
一个客户端的js库socket.io-client
咱们只需安装一个模块就能够来使用：
npm install --save socket.io

这样会自动保存dependency到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对象（HTTP服务器）新建了一个socket.io实例，接着，我对传递进来的套接字（socket），监听connection事件，并将事件答应到console。

如今在index.html中，我在</body>添加了以下语句：

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

这会让网页加载socket.io-client，它会暴露一个io全局对象，并链接socket。

注意：当我调用io()时，我没有特别声明任何url。由于它默认链接这个页面的host服务器。

若是你重现启动服务器，你将会看到console输出“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="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
  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链接，咱们能够用boardcast标示符：

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事件，咱们将它体如今页面中，全部的JavaScript以下：

<script>
  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行代码！！！

后话

固然，学好前端，你还须要关注一个公众号！——每日前端
各位兄弟姐妹，共勉！