socket實現聊天功能(二)

龍恩0707發表於2018-04-23

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的時候，我們會看到一個登入頁面，登入成功後，會記錄使用者名稱；
如下圖所示：

2. 登入成功後，會顯示 某某進入聊天室的文案資訊，右邊有哪些使用者線上，及底部可以傳送訊息和傳送圖片按鈕，如下圖所示

3. 當進入如下三個使用者的時候，三個人分別傳送訊息，自己傳送的訊息在右邊，別人傳送的訊息在左邊；且當前的使用者在使用者列表使用紅色高亮
顯示，使我們可以看得更清楚點；如下圖所示：

4. 可以傳送圖片，如下，

5. 也可以點選圖片，彈窗大圖，如下所示

6， 還可以對單個的使用者傳送簡單的訊息，如下圖所示：

使用者可以接收到訊息；如下圖所示：

github上的原始碼

相關文章