零基礎搭建網頁聊天室（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行代碼！！！