2. 程式人生 > >使用socket.io寫一個聊天室

使用socket.io寫一個聊天室

阿新 • • 發佈：2018-11-23

之前學習了常用的api，以及概念，這裡為了簡單的使用，寫一個demo，為了方便查詢api，這裡給一個傳送門socket.io

準備

  • 老規矩，新建一個目錄，一個index.html, app.js
  • index.html 為客戶端
  • app.js 為服務端

基礎程式碼

首先使用最簡單的程式碼，然後是實現客戶管和服務端連結成功

  • index.html

    • 使用html初始文件，然後引入socket.io指令碼 <script src="/socket.io/socket.io.js"></script>
      , 這個是固定寫法，不可以改變
    • 建立socket物件
    • 連結服務端，並監聽連結事件connect, message事件
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge"
     
    >    
    <title>socket.io</title>
</head>
<body>
    <h2>socket.io</h2>

    <script src="/socket.io/socket.io.js"></script>
    <script>
        let socket = io() // 相當於new Websocket()
      	// 客戶端和服務端連結成功的回撥函式   
        socket.on('connect', function() {
     
    
            console.log('客戶端連結成功')
            socket.send('hello')
        })
        // 客戶端接收到訊息後的回撥函式
        socket.on('message', function (msg) {
            console.log(msg)
        })
        </script>
</body>
</html>

  • app.js

    let express = require('express')
let http = require('http')

let app = express()
app.use(express.static(__dirname))
app.get('/', function (res, req) {
    res.header('Content-Type', 'text/html;charset=utf8')
    res.sendFile(path.resolve('index.html'))
})
let server = http.createServer(app)

// 因為websocket協議是要依賴http協議實現握手的，所以需要把httpServer的例項傳遞給socket.io
let socketIo = require('socket.io')
let io = socketIo(server)
// 在伺服器監聽客戶端的連結
io.on('connection', socket => {
    console.log('客戶端連線到伺服器')
    // 監聽接受客戶端發過來的訊息
    socket.on('message', msg => {
        console.log('客戶端等候掃伺服器的訊息', msg)
        // 像客戶端傳送資料
        socket.send(`伺服器說：${msg}`)
    })
    socket.on('disconect', function () {
        console.log('斷開連線')
    })
    socket.on('error', () => {
        console.log('連線錯誤')
    })
})

server.listen(9999)

實現基本聊天

為了美化一下樣式，這裡使用了bootstarp，

  • index.html 修改如下

    • 簡單的佈局，頭部，訊息體，訊息輸入框和傳送訊息按鈕
    • 修改，我們這裡把訊息(msg：一個json字串),解析出來，拿到對應的傳送訊息的使用者名稱，訊息內容，小時傳送的時間，然後動態建立li，將內容加入li以後再動態加入到訊息列表
    • 傳送訊息的時候檢查訊息是否為空，為空則警告使用者，不為空則傳送小洗，並將輸入框清空
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 最新版本的 Bootstrap 核心 CSS 檔案 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
        crossorigin="anonymous">
    <title>socket.io</title>
</head>
<body>
    <div class="container">
        <div class="row">
           <div class="row-md-12">
               <div class="panel panel-default">
                   <!-- 頭部 -->
                    <header class="panel-heading text-center">
                        <h4>welcome to talk room</h4>
                    </header>
                    <!-- 訊息列表 -->
                   <div class="panel-body">
                        <ul class="list-group" id="msg-list" style="list-style: none;">
                        </ul>
                   </div>
                   <!-- 訊息輸入，傳送按鈕 -->
                    <div class="panel-footer">
                        <div class="row-md-10">
                            <input type="text" id="content" class="form-control">
                            <button id="btn" class="btn btn-primary">傳送訊息</button>
                        </div>
                    </div>
               </div>
           </div>
        </div>
    </div>
    <script src="/socket.io/socket.io.js"></script>
    <script>
        let socket = io() // 相當於new Websocket()

        let ipt = document.querySelector('#content')
        let btn = document.querySelector('#btn')
        let msgList = document.querySelector('#msg-list')
        let LI = document.createElement('li')


        socket.on('connect', function () {
            console.log('客戶端連結成功')
        })
        socket.on('message', function (msg) {
            let li = LI.cloneNode()
            msg = JSON.parse(msg)
            li.innerHTML = `<span style="color: orange">${msg.name}:&emsp;</span><span style="color: #06c;">${msg.msg}</span><span style="float: right;">${(new Date(msg.timer)).toLocaleString()}</span>`
            msgList.appendChild(li)
        })
        
        btn.addEventListener('click',function (params) {
            let msg = ipt.value
            if (msg) {
                socket.emit('message', msg)
                ipt.value = ''
            } else {
                alert('傳送的訊息不能為空！')
            }
        }, false)
    </script>
</body>
</html>

  • app.js修改如下

    • 將使用者第一次傳送的訊息作為使用者的暱稱
    • 接收到訊息以後判斷使用者名稱是否存在，不存在就將當前訊息作為使用者名稱儲存，並通知其他客戶端，該使用者(這個使用者的第一個訊息的名字)，加入了聊天
    • 正常組裝傳送訊息
    • 訊息的內容為：傳送者的名稱，訊息內容，訊息時間
    let express = require('express')
let http = require('http')

let app = express()
app.use(express.static(__dirname))
app.get('/', function (res, req) {
    res.header('Content-Type', 'text/html;charset=utf8')
    res.sendFile(path.resolve('index.html'))
})
let server = http.createServer(app)

// 因為websocket協議是要依賴http協議實現握手的，所以需要把httpServer的例項傳遞給socket.io
let socketIo = require('socket.io')
let io = socketIo(server)
// 在伺服器監聽客戶端的連結
let sockets = {} // 儲存使用者
let SYS = '系統提示'
let t = new Date() // 用來處理訊息傳送時間
io.on('connection', socket => {
    console.log('客戶端連線到伺服器', socket.name)
    let username;
    // 監聽接受客戶端發過來的訊息
    socket.on('message', msg => {
        if (username) {
            username = msg
            // 訊息內容
            let message = {
                name: SYS,
                timer: t.getTime(),
                msg: `${msg} 進入聊天`
            }
            // 將物件儲存，方便後期使用
            sockets[username] = socket
            // 像除了自己別的使用者廣播訊息
            socket.broadcast.emit('message', JSON.stringify(message))
        } else {
            // 像客戶端傳送資料
            let message = {
                name: username,
                timer: t.getTime(),
                msg: msg
            }
            io.emit('message', JSON.stringify(message))
        }
        
    })
    socket.on('disconect', function () {
        console.log('斷開連線')
    })
    socket.on('error', () => {
        console.log('連線錯誤')
    })
})

server.listen(9999)

實現私聊

  • index.html

    • 給li新增點選事件，拿到需要私聊的名稱，然後賦值到輸入框中
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 最新版本的 Bootstrap 核心 CSS 檔案 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
        crossorigin="anonymous">
    <title>socket.io</title>
</head>
<body>
    <div class="container">
        <div class="row">
           <div class="row-md-12">
               <div class="panel panel-default">
                    <header class="panel-heading text-center">
                        <h4>welcome to talk room</h4>
                    </header>
                   <div class="panel-body">
                        <ul class="list-group" id="msg-list" style="list-style: none;">
                        </ul>
                   </div>
                    <div class="panel-footer">
                        <div class="row-md-10">
                            <input type="text" id="content" class="form-control">
                            <button id="btn" class="btn btn-primary">傳送訊息</button>
                        </div>
                    </div>
               </div>
           </div>
        </div>
    </div>
    <script src="/socket.io/socket.io.js"></script>
    <script>
        let socket = io() // 相當於new Websocket()

        let ipt = document.querySelector('#content')
        let btn = document.querySelector('#btn')
        let msgList = document.querySelector('#msg-list')
        let LI = document.createElement('li')


        socket.on('connect', function () {
            console.log('客戶端連結成功')
        })
        socket.on('message', function (msg) {
            let li = LI.cloneNode()
            msg = JSON.parse(msg)
            li.innerHTML = `<span style="color: orange" onClick="sendPrive('${msg.name}')">${msg.name}:&emsp;<span style="color: #06c;">${msg.msg}</span></span><span style="float: right;">${(new Date(msg.timer)).toLocaleString()}</span>`
            msgList.appendChild(li)
        })
        /**
         * 設定需要私密通話的物件
         */
        function sendPrive(name) {
            let str = `@${name} `
            ipt.value = str
        }
        btn.addEventListener('click',function (params) {
            let msg = ipt.value
            if (msg) {
                socket.emit('message', msg)
                ipt.value = ''
            } else {
                alert('傳送的訊息不能為空！')
            }
        }, false)
    </script>
</body>
</html>

  • app.js

    • 拿到訊息以後需要做一個解析，判斷是否有私密聊天的name，如果有做類外的邏輯
    • /^@([^ ]+) (\S)+/獲取訊息的name和內容，如果只有訊息，則不會有返回值
    • 如果有則從sockets中找到該物件，然後單獨傳送給該使用者這條訊息
    • 如果沒有，則按照廣播的形式正常傳送
    let express = require('express')
let http = require('http')

let app = express()
app.use(express.static(__dirname))
app.get('/', function (res, req) {
    res.header('Content-Type', 'text/html;charset=utf8')
    res.sendFile(path.resolve('index.html'))
})
let server = http.createServer(app)

// 因為websocket協議是要依賴http協議實現握手的，所以需要把httpServer的例項傳遞給socket.io
let socketIo = require('socket.io')
let io = socketIo(server)
// 在伺服器監聽客戶端的連結
let sockets = {}  
 
    
            
      
    
           
    
              
              
    
            
    
            
    相關推薦
    
			   
            
            
            
 

    

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

    
  
 

    

    
    
    
    Golang之寫一個聊天室
    
     
     gpo   動作   color   字母數   信息   數據   用戶登錄   clas   是否   
1. 海量用戶在線聊天系統
2. 點對點聊天
3. 用戶登錄&註冊


一、服務端開發
1. 用戶管理
   
   用戶id：數字
   用戶密碼：字母數字組合
    
    

    
  
 

    

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

    
  
 

    

    
    
    
    用NodeJs使用Io做一個聊天室
    
     
     
                                                        浪費了“黃金五年”的Java程式設計師，還有救嗎？
>>>   
                                        
      
    

    
  
 

    

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

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

    
  
 

    

    
    
    
    SpringBoot整合WebSocket，打造一個聊天室
    
     
      
 
 本文，我們來講下SpringBoot整合WebSocket，打造一個聊天室。 
   
  
 WebSocket 是什麼？ 
   
 WebSocket 是一種網路通訊協議，RFC6455 定義了它的通訊標準。 
 瞭解計算機網路協議的人應該都知道，HTTP 協議是一種無狀態 
    

    
  
 

    

    
    
    
    C#程式設計 socket程式設計之unity聊天室
    
     
      
 
 上面我們建立了tcp的客戶端和服務端，但是隻能進行訊息的一次收發。這次我們做一個unity的簡易聊天室，使用了執行緒，可以使用多個客戶端連線伺服器，並且一個客戶端給伺服器發訊息後，伺服器會將訊息群發給所有客戶端。 
   
 伺服器端分為Program和Client，在Program中進行 
    

    
  
 

    

    
    
    
    無聊，幾行python程式碼寫一個聊天機器人陪你聊天
    
     
     
							
							
							程式碼
利用爬蟲功能實現。
import urllib.request
import re

while True:
    x = input("主人：")
    x = urllib.parse.quote(x)
    link = urllib.req 
    

    
  
 

    

    
    
    
    自己寫的聊天室專案
    
     
     
							
							
							作業：（服務端，客戶端）
寫一個聊天室
功能：類似qq群聊
1.進入聊天室需要輸入姓名，提示一下姓名不能重複
2.有人進入聊天室會向其他人傳送通知
xxx 進入了聊天室
3.一個人發訊息，其他人會收到訊息，自己不收到
xxx 說：xxxxxxxxxxx
4.某人 
    

    
  
 

    

    
    
    
    socket.io多房間聊天
    
     
     

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

    
  
 

    

    
    
    
    boost asio非同步讀寫網路聊天室【官方示例】
    
     
     
                
//
// chat_message.hpp
// ~~~~~~~~~~~~~~~~
//
// Copyright (c) 2003-2010 Christopher M. Kohlhoff (chris at kohlhoff dot com)
//
// Distri 
    

    
  
 

    

    
    
    
    日常改bug之寫簡單聊天室並放到伺服器上
    
     
      
  
  
 一.查詢資料庫時查詢不了中文的問題 
 當查詢語句是這樣時，如果${name}是中文，則查詢不到資料 
  `select * from admin_table where name=${name}`
 
 改為以下，即在${name}前加入N即可 
 `select * from admi 
    

    
  
 

    

    
    
    
    Golang實戰-一個聊天室的實現
    
     
     
                
《Go語言程式設計》中第8.10節有個聊天室的例子，我們就來跟著完成這個例子。
先來看看主函式：

func main() {
	listener, err := net.Listen("tcp", "localhost:8000")
	if err != nil {
   
    

    
  
 

    

    
    
    
    H5+MUI+Node.js+Socket.io實現即時聊天以及傳送+圖片壓縮+圖片預覽儲存
    
     
     
                

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,i 
    

    
  
 

    

    
    
    
    融雲集成一個聊天室頁面(vue版本)
    
     
     
                  首先，說一下使用情況。因為需求，需要做一個聊天室頁面，因為不是專門的點對點聊天，是類似直播，但是是文字直播平臺的那種。現在一般的課堂，可能會需要這種。分為2個端，一個是講師端，一個是使用者端。講師端可能是單獨的APP。使用者端的頁面可能是內嵌到專門的APP，或者是微信公眾 
    

    
  
 

    

    
    
    
    Socket程式設計實現簡易聊天室
    
     
     

 1 　　public class ServerThread implements Runnable {
 2 　　
 3 　　    //定義當前執行緒所處理的Socket
 4 　　    private Socket socket = null;
 5 　　    //該執行緒所處理的Socket對 
    

    
  
 

    

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

    
  
 

    

    
    
    
    基於網絡聊天室的社交遊戲 -- 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 
    

    
  
 

    

    
    
    
    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