码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-05-10 11:09:29      阅读:62      评论:0      收藏:0      [点我收藏+]

标签:lang   on()   java   rgba   客户端   client   console   dev   user   

我此前曾发过一遍文章有关于如何利用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,以为大家积极评论。最后附上项目运行的结果截图及源码下载地址。
技术图片
技术图片
技术图片
项目源码地址是:
链接:http://pan.baidu.com/s/1qXVhYuo 密码:2x2c

本文转载于:感谢有“你”-------socket.io

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

标签:lang   on()   java   rgba   客户端   client   console   dev   user   

原文地址:https://www.cnblogs.com/homehtml/p/12861893.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!