socket.io建立聊天系統

阿新 • • 發佈：2019-01-14

<>線上聊天系統<>
[service]

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

app.get('/', function (req, res) {
  res.sendFile(__dirname + '/socket_cli.html');
});

var onlineUserCount = 0; //客戶端連線數量
var onlineUsers = 
 {}; //統計客戶端登入使用者

io.on('connection', function (socket) {
  socket.emit('open');  //通知客戶端已連線

  //構造客戶端物件
  var client = {
    socket: socket,
    name: false
  }

  //監聽客戶端的chat message事件， 該事件由客戶端觸發
  //當服務端收到訊息後，再把該訊息播放出去，繼續觸發chat message事件， 然後在客戶端監聽chat message事件。
  socket.on('chat message', function (msg) 
 {
    console.log('chat message:' + msg);
    var obj = { time: getTime() }; //構建客戶端返回的物件

    //判斷是不是第一次連線，以第一條訊息作為暱稱
    if (!client.name) {
      onlineUserCount++;

      client.name = msg;
      obj['text'] = client.name;
      obj['author'] = 'Sys';
      obj['type'] = 'welcome';
      obj['onlineUserCount' 
] = onlineUserCount;
      socket.name = client.name; //使用者登入後設置socket.name， 當退出時用該標識刪除該線上使用者
      if (!onlineUsers.hasOwnProperty(client.name)) {
        onlineUsers[client.name] = client.name;
      }
      obj['onlineUsers'] = onlineUsers; //當前線上使用者集合
      console.log(client.name + ' login,當前線上人數:' + onlineUserCount);

      //返回歡迎語
      socket.emit('system', obj);  //傳送給自己的訊息
      //廣播新使用者已登入
      socket.broadcast.emit('system', obj); //向其他使用者傳送訊息
    } else {
      //如果不是第一次聊天，則返回正常的聊天訊息
      obj['text'] = msg;
      obj['author'] = client.name;
      obj['type'] = 'message';
      console.log(client.name + ' say:' + msg);

      socket.emit('chat message', obj); //傳送給自己的訊息 ， 如果不想列印自己傳送的訊息，則註釋掉該句。
      socket.broadcast.emit('chat message', obj); //向其他使用者傳送訊息

    }
    //io.emit('chat message',msg);
  });

  socket.on('disconnect', function () {
    onlineUserCount--;

    if (onlineUsers.hasOwnProperty(socket.name)) {
      delete onlineUsers[client.name];
    }

    var obj = {
      time: getTime(),
      author: 'Sys',
      text: client.name,
      type: 'disconnect',
      onlineUserCount: onlineUserCount,
      onlineUsers: onlineUsers
    };

    //廣播使用者退出
    socket.broadcast.emit('system', obj); //使用者登入和退出都使用system事件播報
    console.log(client.name + ' disconnect,當前線上人數:' + onlineUserCount);
  });


});

http.listen(3000, function () {
  console.log('server begin...');
});

var getTime = function () {
  var date = new Date();
  return date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
}

var getColor = function () {
  var colors = ['aliceblue', 'antiquewhite', 'aqua', 'aquamarine', 'pink', 'red', 'green',
    'orange', 'blue', 'blueviolet', 'brown', 'burlywood', 'cadetblue'];
  return colors[Math.round(Math.random() * 10000 % colors.length)];
}

[client]

<!doctype html>
<html>

<head>
  <title>Socket.IO chat</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font: 13px Helvetica, Arial;
    }

    div {
      background: #000;
      padding: 3px;
      position: fixed;
      bottom: 0;
      width: 100%;
    }

    div input {
      border: 0;
      padding: 10px;
      width: 90%;
      margin-right: .5%;
    }

    div 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;
    }

    p {
      padding: 5px 10px;
    }
  </style>
</head>

<body>
  <p id="onlineUser">線上人數:0</p>
  <ul id="messages"></ul>

  <div action="">
    <input id="m" autocomplete="off" />
    <button>Send</button>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>
  <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
  <script type="text/javascript">
    var myName = false;

    var socket = io('http:/localhost:3000');
    socket.on('open', function () {
      $('#messages').append($('<li>').text('已連線至伺服器,請輸入暱稱'));
    });

    //監聽system事件，判斷welcome或者disconnect，列印系統訊息
    socket.on('system', function (json) {
      var sep = '';
      var onlinehtml = '';
      var onlineUsers = json.onlineUsers;
      for (key in onlineUsers) {
        if (onlineUsers.hasOwnProperty(key)) {
          onlinehtml += sep + onlineUsers[key];
          sep = '、';
        }
      }

      if (json.type === 'welcome') {
        $('#messages').append($('<li>').text('Sys(' + json.time + ')welcome ' + json.text));
        $('#onlineUser').text('線上人數:' + json.onlineUserCount + '。線上列表:' + onlinehtml);
      } else if (json.type === 'disconnect') {
        $('#messages').append($('<li>').text('Sys(' + json.time + ')bye ' + json.text + ''));
        $('#onlineUser').text('線上人數:' + json.onlineUserCount + '。線上列表:' + onlinehtml);
      }
    });

    //監聽服務端的chat message事件，接受每一條訊息
    socket.on('chat message', function (json) {
      $('#messages').append($('<li>').text(json.author + '(' + json.time + ')' + ':' + json.text));
    });


    $('#m').keydown(function (e) {
      if (e.keyCode === 13) {
        socket.emit('chat message', $('#m').val());

        //socket.send($('#m').val());
        $('#m').val('');
        if (myName === false) {
          myName = $('#m').val();
        }
      }
    })
  </script>
</body>

</html>

參考文件:https://socket.io/

socket.io建立聊天系統

<>線上聊天系統<> [service] var express = require('express'); var app = express(); var http = require('http').Server(app); var io = require

使用 Socket.IO 開發聊天室

對象 ima -1 hello 前言 text 而後一定的發布前言 Socket.IO 是一個用來實現實時雙向通信的框架，其本質是基於 WebSocket 技術。我們首先來聊聊 WebSocket 技術，先設想這麽一個場景： · 用戶小A，打開了某個網站的充值界面

1025_(即時通訊)使用 Socket.IO 開發聊天室

使用 Socket.IO 開發聊天室前言 Socket.IO 是一個用來實現實時雙向通訊的框架，其本質是基於 WebSocket 技術。我們首先來聊聊 WebSocket 技術，先設想這麼一個場景： · 使用者小A，打開了某個網站的充值介面，該介面上有一個付款的二維碼。 ·

Node.Js+Redis+Socket.IO 實現聊天室或推送訊息

基於Redis 推送，向Node.Js 推送訊息，Node.Js 把訊息推送給 Socket.IO(可以是WebSocket，也可以是long-Polling,由Socket.IO 封裝) 需要 Redis服務端，Node.Js需要 redis模組和Socket.IO模組

用express和socket.io做聊天室遇到的連結錯誤坑/socket.io/?EIO=

遇到的報錯資訊 http://127.0.0.1:3000/socket.io/?EIO=3&transport=polling&t=ME7dXNi 0 ()***.cn/test被nginx轉發到8100埠socket = io.connect('http:

基於網絡聊天室的社交遊戲 -- vue、socket.io-client

社交遊戲網絡聊天 tar style nodes -c eba html target 系列博文的傳送門：http://www.cnblogs.com/lastpairs/p/6993237.html 客戶端代碼github地址 https://github.com/xx

基於網絡聊天室的社交遊戲 -- nodejs、express、socket.io-server

ref https dom 後端 log allow 系列 max command 系列博文的傳送門：http://www.cnblogs.com/lastpairs/p/6993237.html 客戶端代碼github地址 https://github.com/xxyjs

使用socket.io實現簡單的聊天功能

ins sock UNC say mes 輪詢 var document style Socket.io實際上是WebSocket的父集，Socket.io封裝了WebSocket和輪詢等方法首先得在你的項目中安裝socket.io $ npm install sock

消息隊列、socket(UDP)實現簡易聊天系統

sed sele perror 語句 sprintf display clu 隊列 success 　　前言：　　最近在學進程間通信，所以做了一個小項目練習一下。主要用消息隊列和socket(UDP)實現這個系統，並數據庫存儲數據，對C語言操作數據庫不熟悉的可以參照我的

1024_(即時通訊)使用node.js和socket.io實現多人聊天室

使用node.js和socket.io實現多人聊天室 2015年01月24日 03:24:54 遠古大猛獁閱讀數：2775 轉自： http://www.cnblogs.com/flyoung2008/archive/2012/07/19/2600132.html

使用socket.io寫一個聊天室

之前學習了常用的api，以及概念，這裡為了簡單的使用，寫一個demo，為了方便查詢api，這裡給一個傳送門socket.io 準備老規矩，新建一個目錄，一個index.html, app.js index.html 為客戶端 app.js 為服

聊天功能外掛Socket.io

一、Socket.io是什麼　　是基於時間的實時雙向通訊庫　　基於websocket協議的　　前後端通過時間進行雙向通訊　　配合express快速開發實時應用二、Socket.io和ajax區別　　基於不同的網路協議　　ajax基於http協議，單向，實時獲取資料只能輪詢　　s

Socket.IO實現簡單聊天室

Socket.IO介紹官方文件 https://socket.io/docs/ Socket.io是一個跨瀏覽器支援WebSocket的實時通訊的JS。它不僅簡化了介面，使得操作更容易，而且對於那些不支援WebSocket的瀏覽器，會自動降為Ajax連線，最大限度地保證了相容性。它

express + socket.io實現超簡易聊天室

什麼是socket.io socket.io是webSocket的一個封裝元件，實現雙向通訊，可以用這個來實現聊天室功能、線上小遊戲等等，是個有趣好玩的東西，博主就喜歡搗鼓這些實現聊天室思路聊天室就是要聊天嘛，就像打電話一樣，我這邊說話你那邊應該要馬上聽到，所以就需要用到雙向通訊，瀏覽器發

利用socket.io搭建一個簡易的聊天室

前言本篇介紹使用node.js模組元件socket.io實現一個非常非常簡易的聊天案例。本系列文章不對 socket.io 歷史背景做過多闡述，只會通過一個個的案例帶領大家進入socket.io的殿堂，增進小夥伴在socket.io實際開發中的基本使用。 socket.

如何建立雲平臺聊天系統，如何解決訊息推送困難問題

聊天業務描述：使用者1發起聊天，將聊天資訊傳送到伺服器，伺服器將資訊轉發到使用者2 需要解決的問題： 1.如何判斷使用者是否線上（通過使用者滑鼠點選範圍進行判斷，若點選離開頁面則認為使用者的關注點不

Node.js(socket.io)+ html + js搭建簡單聊天工具

Node.js+ html + js搭建簡單聊天工具環境準備依賴模組服務端客戶端執行乾貨，直接擼程式碼環境準備 Node.js 依賴模組 socket.io

用訊息佇列和socket實現聊天系統

　　前言：最近在學程序間通訊，所以做了一個小專案練習一下。主要用訊息佇列和socket(UDP)實現這個系統，並資料庫儲存資料，對C語言操作不熟悉的可以參照我的這篇部落格：https://www.cnblogs.com/liudw-0215/p/9593414.html，所有程式碼提交我的Github上，地址

socket.io多房間聊天

Socket.IO是一個開源的WebSocket庫，它通過Node.js實現WebSocket服務端，同時也提供客戶端JS庫。Socket.IO支援以事件為基礎的實時雙向通訊，它可以工作在任何平臺、瀏覽器或移動裝置。 Socket.IO支援4種協議：WebSocket、htmlfile、xhr-polli

Node.js websocket 使用 socket.io庫實現實時聊天室

認識websocket WebSocket protocol 是HTML5一種新的協議。它實現了瀏覽器與伺服器全雙工通訊(full-duple)。一開始的握手需要藉助HTTP請求完成。其實websocket 並不是很依賴Http協議，它也擁有自己的一套協議

socket.io建立聊天系統

相關推薦