socket實現聊天功能(二)

本文轉載自查看原文 2018-04-23 23:03 1417 websocket/ socket實現聊天功能(二)

socket實現聊天功能(二)

WebSocket協議是建立在HTTP協議之上，因此創建websocket服務時需要調用http模塊的createServer方法。將生成的server作為參數傳入
socket.io的方法中。如下代碼：

var express = require('express');
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io')(server);
var port = process.env.PORT || 7777;

服務端對應的事件：

1. io.on('connection')
該事件的含義是監聽客戶端和服務器端成功建立連接，它有一個回調函數，該回調函數接收一個socket參數，如下代碼：

io.on('connection', function(socket){
  
});

2. io.emit(EventName, param);
該方法用於向服務器發送消息，第一個參數是發送消息的名字，第二個參數是需要傳遞的數據參數。
比如：

io.emit('user connect', data);

客戶端有socket對象，因此可以通過 socket.on('user connect', data); 來監聽服務器使用 io.emit('user connect', data)發來的消息。
如下代碼：

socket.on('user connect', (data) => {
  // 做一些事情
});

3. socket.on(EventName, callback)

服務器端也有socket.on()方法，該方法用於監聽客戶端通過 socket.emit(EventName)發送來的消息。如下客戶端的消息如下：

socket.emit('client message', {
  text: msg,
  time: new Date()
}, () => {
  console.log('發送成功');
});

服務端可以使用如下監聽客戶端：

// 監聽發送的消息
socket.on('client message', (data) => {
  console.log(data);
});

4. socket.broadcast.emit();

該方法表示向除了自己以外的客戶端發送消息。如下代碼：

// 廣播給除自己以外的客戶端
socket.broadcast.emit('server message', data);

客戶端可以通過如下方法獲取到對應的消息；
// 接收消息
socket.on('server message', (data) => {
  console.log(data);
});

5. socket.on('disconnect'), 表示客戶端和服務端斷開鏈接。
如下代碼：

// 監聽用戶離開
socket.on('disconnect', () => {
  // 通知用戶離開
  io.emit('user disconnect', user);
});

客戶端通過下面的代碼監聽到信息，如下：
// 監聽用戶離開聊天室
socket.on('user disconnect', (user) => {
  console.log(user);
});

下面我們來簡單的來看一個聊天的demo案列：
首先看一個項目的目錄結構如下：

### 目錄結構如下：
  demo                    # 工程名
  |   |--- client                             
  |   | |--- bootstrap    # bootstrap中的css和js文件夾    
  |   | |--- index.css    # css樣式
  |   | |--- index.js     # 客戶端的js
  |   | |--- index.html   
  |   | |--- server.js    # 服務端的js    
  |   |                                         
  |   |--- .gitignore  
  |   |--- README.md
  |   |--- package.json

1. 首先我們每一個用戶需要登錄，因此當我們運行 node.server.js的時候，我們會看到一個登錄頁面，登錄成功后，會記錄用戶名；
如下圖所示：