感谢有“你”-------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