跟我一塊兒使用socket.io建立聊天應用

時間 2019-11-11

標籤一塊兒使用 socket.io socket 建立聊天應用欄目系統網絡简体版

原文原文鏈接

安裝express插件

新建index.jshtml

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

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

http.listen(9000, function(){
  console.log('listening on *:9000');
});

使用node index.js運行
頁面中展現
node

目前在index.js中咱們是經過res.send返回一個HTML字符串，若是咱們將整個應用的HTML代碼都放到應用代碼裏，代碼結構將變得混亂。
替代方法是新建一個index.html做爲服務器響應jquery

//index.js
var app = require('express')();
var http = require('http').Server(app);

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

http.listen(9000, function(){
  console.log('listening on *:9000');
});

index.html中的內容爲express

<!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>

從新運行爲

咱們發送消息裏面什麼反應都沒有
咱們在這個裏面集成Socket.io
Socket.io由兩部分組成：
一個服務端用於集成或掛載到Node.jsHTTP服務器:socket.io
一個加載到瀏覽器中的客戶端:socket.io-client
開發環境下,socket.io會自動提供客戶端，安裝socket.io

在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(9000, function(){
  console.log('listening on *:9000');
});

在index.html中添加服務器

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

如今index.html爲app

<!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>
    <script src="/socket.io/socket.io.js"></script>
    <script>
    var socket = io();
    </script>
  </body>
</html>

運行效果爲

socket.io的核心理念是容許發送，接收任意事件和任意數據，任意能被編碼爲JSON的對象均可以用於傳輸，二進制也是支持的
在客戶端中，咱們捕獲 chat message 事件，並將消息添加到頁面中。如今客戶端代碼應該以下：socket

<!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>
    <script src="/socket.io/socket.io.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
    <script>
    var socket = io();
    </script>
    <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>
  </body>
</html>

index的代碼爲學習

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){
    socket.on('chat message', function(msg){
        io.emit('chat message', msg);
      });
});

http.listen(9000, function(){
  console.log('listening on *:9000');
});

運行項目爲

本文學習自：https://www.w3cschool.cn/socket/socket-ulbj2eii.htmlui