實現一個簡單的WebSocket聊天室

時間 2019-12-08

標籤實現一個簡單 websocket 聊天室简体版

原文原文鏈接

WebSocket 簡介

WebSocket 是 HTML5 開始提供的一種在單個 TCP 鏈接上進行全雙工通信的協議。 WebSocket 使得客戶端和服務器之間的數據交換變得更加簡單，容許服務端主動向客戶端推送數據。在 WebSocket API 中，瀏覽器和服務器只須要完成一次握手，二者之間就直接能夠建立持久性的鏈接，並進行雙向數據傳輸。在 WebSocket API 中，瀏覽器和服務器只須要作一個握手的動做，而後，瀏覽器和服務器之間就造成了一條快速通道。二者之間就直接能夠數據互相傳送。javascript

爲何傳統的HTTP協議不能作到WebSocket實現的功能？這是由於HTTP協議是一個請求－響應協議，請求必須先由瀏覽器發給服務器，服務器才能響應這個請求，再把數據發送給瀏覽器。換句話說，瀏覽器不主動請求，服務器是無法主動發數據給瀏覽器的。css

Web

咱們先用 express 搭一個基礎的服務端。html

建立 index.js 文件html5

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

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

http.listen(3000, function(){
  console.log('listening on *:3000');
});
複製代碼

run node index.js，並在瀏覽器打開 http://localhost:3000，訪問成功便可看到java

HTML

設計咱們的主頁，實現一個簡單的聊天窗口。node

修改 index.jsjquery

app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');
});
複製代碼

建立 index.htmlweb

<!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>
複製代碼

重啓應用並刷新頁面你就能夠看到一個以下圖所示express

Socket.io

引入socket.ionpm

npm install --save 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('an user connected');
});

http.listen(3000, function(){
  console.log('listening on *:3000');
});
複製代碼

修改 index.html，在</body>下添加以下代碼

<script src="/socket.io/socket.io.js"></script>
<script> var socket = io(); </script>
複製代碼

重啓應用並刷新頁面，就能夠看到命令行打印以下

Emitting event

當用戶在聊天窗的輸入框內輸入，並提交時，觸發 emit 事件，服務端監聽到該事件並作出相應的反應。

修改 index.html

<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(e){ e.preventDefault(); // 防止頁面從新加載 socket.emit('chat message', $('#m').val()); $('#m').val(''); return false; }); }); </script>
複製代碼

服務端監聽該事件，在 index.js 文件添加該代碼

io.on('connection', function(socket){
  socket.on('chat message', function(msg){
    console.log('message: ' + msg);
  });
});
複製代碼

展現消息

當服務端收到用戶A發出的消息，服務端從新發出該消息，讓客戶端接收，客戶端監聽到該事件後展現該條消息，就能夠實現用戶 A, B, C 都接收到該消息。

修改 index.js

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

修改 index.html，實現消息的展現

<script> $(function () { var socket = io(); $('form').submit(function(e){ e.preventDefault(); // prevents page reloading socket.emit('chat message', $('#m').val()); $('#m').val(''); return false; }); socket.on('chat message', function(msg){ $('#messages').append($('<li>').text(msg)); }); }); </script>
複製代碼

重啓應用並刷新頁面，能夠打開多個瀏覽器頁面同時訪問 localhost:3000，就能夠體驗簡單聊天室的效果。

設置暱稱

在每一個用戶進入的時候，隨機生成一個數字做爲用戶的暱稱，而且向全部用戶廣播該用戶進入聊天室。當用戶發送消息時，拼接上用戶的暱稱。

修改 index.js

io.on('connection', (socket) => {
  const nickname = 'user' + Math.ceil((Math.random() * 1000))
  socket.broadcast.emit('connection', nickname + ' connected')

  socket.on('chat message', (msg) => {
    io.emit('chat message', nickname + ': ' + msg)
  })
})
複製代碼

修改 index.html，監聽 connection 事件

<script> $(() => { const socket = io() $('form').submit((e) => { e.preventDefault() socket.emit('chat message', $('#m').val()) $('#m').val('') return false }); socket.on('chat message', (msg) => { $('#messages').append($('<li>').text(msg)) }) socket.on('connection', (msg) => { $('#messages').append($('<li>').text(msg)) }) }); </script>
複製代碼