感谢有“你”-------socket.io

2019年9月10日 119次阅读 来源: james

我此前曾发过一遍文章有关于如何利用node.js+websocket搭建一个简单的多人聊天室有兴趣的朋友可以关注我的技术客栈—涛涛技术客栈。今天学习了websocket的一个框架—socket.io后瞬间感觉神清气爽，顿感从无尽的回调函数中解脱出来，今天我将继续就多人聊天室这个demo来和大家分享一下如何利用socket.io来创建它。

安装socket.io所需的包

众所周知，node.js采用了包结构进行管理，所以我们在使用一些模块（modules）时必须使用npm(install package managment,即安装包管理工具)安装socket.io,安装时仍需安装在你的node.js中npm的node_modules目录下，例如在我的电脑中的安装路径是这样的：D:Node.jsnode_modulesnpmnode_modules

最后只有npm install -g socket.io安装socket.io（必须使用-g进行全局安装），接下来进行项目的编写。

创建客户端

客户端如下：

<!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>

</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”);

            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’);

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

【5】 showMessage(data,’message’);

        })**

        **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>

说明：代码中重要的部分我都进行了加粗并进行编号，下面我们来分析这些重要的代码。

  1. 首先将socket.io的包拷贝到你的项目文件下，并在head部分使用script标签将其添加进去
  2. 使用socket.io专业的函数创建一个websocket端点
  3. 当在消息框输入消息并点击发送按钮时，客户端就将向服务器端发送输入的消息，消息类型是message。
  4. 当有新的用户进入聊天室时，服务器就会向全部的客户端广播这样一条消息：userxx comes in
  5. 当任意一个客户端向服务器发送消息时，服务器就会将这条消息广播给全部的客户端。
  6. 当有任一客户端离开时，服务器就会向全部客户端广播这样一条消息：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来创建服务器端非常简洁、方便，大家是不是感觉这代码看起来就很清爽呀。代码中的重要部分我都进行了加粗标记及编号处理，下面我跟大家分享一下重要的代码。

  1. 首先我们需要一个绑定使用http协议的变量：app
  2. 接下来我们还需要创建一个使用socket.io这个modules的变量并且绑定http变量
  3. 这个绑定了http的变量也需要监听服务器端的端口号
  4. 当有一个客户端与服务器端进行连接时就调用回调函数
  5. 接下来当触发“enter”事件时服务器端向客户端广播这样一条消息：userxx comes in
  6. 当有客户端向服务器端发送消息时就会触发message事件，这时服务器端向全部客户端广播该客户端向服务器端发送的消息。
  7. 当有客户端关闭时socket.io就会调用自身的disconnect事件，并且向全部客户端广播这样一条消息，userxx left。

以上就是关于我分享使用socket.io来创建一个简单的多人聊天室的一个小demo，以为大家积极评论。最后附上项目运行的结果截图及源码下载地址。
《感谢有“你”-------socket.io》
《感谢有“你”-------socket.io》
《感谢有“你”-------socket.io》
项目源码地址是：
链接：http://pan.baidu.com/s/1qXVhYuo 密码：2x2c

    原文作者：james
    原文地址: https://segmentfault.com/a/1190000011228252
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞