感謝有「你」-------socket.io

時間 2019-12-05

原文原文鏈接

我此前曾發過一遍文章有關於如何利用node.js+websocket搭建一個簡單的多人聊天室有興趣的朋友能夠關注個人技術客棧---濤濤技術客棧。今天學習了websocket的一個框架---socket.io後瞬間感受神清氣爽，頓感從無盡的回調函數中解脫出來，今天我將繼續就多人聊天室這個demo來和你們分享一下如何利用socket.io來建立它。javascript

安裝socket.io所需的包

衆所周知，node.js採用了包結構進行管理，因此咱們在使用一些模塊（modules）時必須使用npm(install package managment,即安裝包管理工具)安裝socket.io,安裝時仍需安裝在你的node.js中npm的node_modules目錄下，例如在個人電腦中的安裝路徑是這樣的：D:Node.jsnode_modulesnpmnode_moduleshtml

最後只有npm install -g socket.io安裝socket.io（必須使用-g進行全局安裝），接下來進行項目的編寫。java

建立客戶端

客戶端以下：node

<!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>websocket</title>

【1】 <script type="text/javascript" src="socket.io-1.3.7.js"></script>web

</head>
<body>
    <center><h1>ChatRoom</h1></center>
    <hr>
    <input type="text" id="sendTxt">
    <br>
    <button id="sendBtn">發送</button>
    <script type="text/javascript">

【2】 var socket = io("ws://localhost:3000");npm

document.getElementById('sendBtn').onclick = function()
        {
            var txt = document.getElementById('sendTxt').value;
            if(txt){

【3】 socket.emit('message',txt);服務器

}
        } 
        **socket.on('enter',function(data){

【4】 showMessage(data,'enter');websocket

})**
        
        **socket.on('message',function(data){

【5】 showMessage(data,'message');app

})**

        **socket.on('left',function(data){
            showMessage(data,'left');

【6】 })**框架

function showMessage(str,type)
        {
            var div = document.createElement('div');
            div.innerHTML = str;
            if(type=="enter"){
            div.style.color = "blue";
            }else if(type=="left"){
                div.style.color = "red";
            }
            document.body.appendChild(div);
        }
    </script>
</body>
</html>

說明：代碼中重要的部分我都進行了加粗並進行編號，下面咱們來分析這些重要的代碼。

首先將socket.io的包拷貝到你的項目文件下，並在head部分使用script標籤將其添加進去
使用socket.io專業的函數建立一個websocket端點
當在消息框輸入消息並點擊發送按鈕時，客戶端就將向服務器端發送輸入的消息，消息類型是message。
當有新的用戶進入聊天室時，服務器就會向所有的客戶端廣播這樣一條消息：userxx comes in
當任意一個客戶端向服務器發送消息時，服務器就會將這條消息廣播給所有的客戶端。
當有任一客戶端離開時，服務器就會向所有客戶端廣播這樣一條消息：userxx left

建立服務器端

服務器端代碼：

【1】 var app = require('http').createServer()
【2】 var io = require('socket.io')(app)

var PORT = 3000
var clientCount = 0

【3】 app.listen(PORT)
【4】 io.on('connection',function(socket){

clientCount++
    socket.nickname = 'user'+clientCount

【5】 io.emit('enter',socket.nickname+" comes in")
【6】 socket.on('message',function(str){

**io.emit('message',socket.nickname+' say:'+str)**
    })

【7】 socket.on('disconnect',function(){

io.emit('left',socket.nickname+" left")
    })
}) 
console.log("websocket listening on port:"+PORT)

很顯然使用了socket.io來建立服務器端很是簡潔、方便，你們是否是感受這代碼看起來就很清爽呀。代碼中的重要部分我都進行了加粗標記及編號處理，下面我跟你們分享一下重要的代碼。

首先咱們須要一個綁定使用http協議的變量：app
接下來咱們還須要建立一個使用socket.io這個modules的變量而且綁定http變量
這個綁定了http的變量也須要監聽服務器端的端口號
當有一個客戶端與服務器端進行鏈接時就調用回調函數
接下來當觸發「enter」事件時服務器端向客戶端廣播這樣一條消息：userxx comes in
當有客戶端向服務器端發送消息時就會觸發message事件，這時服務器端向所有客戶端廣播該客戶端向服務器端發送的消息。
當有客戶端關閉時socket.io就會調用自身的disconnect事件，而且向所有客戶端廣播這樣一條消息，userxx left。

以上就是關於我分享使用socket.io來建立一個簡單的多人聊天室的一個小demo，覺得你們積極評論。最後附上項目運行的結果截圖及源碼下載地址。

項目源碼地址是：
連接：http://pan.baidu.com/s/1qXVhYuo 密碼：2x2c

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。