WebSocket 学习(五)--用socketIO实现聊天室

最新推荐文章于 2025-07-04 10:56:41 发布

原创最新推荐文章于 2025-07-04 10:56:41 发布 · 3.4k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#聊天 #websocket #socketio

webSocket 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何使用 Socket.IO 构建实时通信系统。通过一个聊天室示例，详细讲解了服务器端与客户端的实现过程，并与 WebSocket 进行了对比。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

socket.io封装了多种实时通信技术, 提供统一的API, 如果浏览器不支持WebSocket也可以平稳退化成其它的:

可以说WebSocket提供了一直方法，socketIO则是这个方法的应用，封装了WebSocket，因此个人暂时觉得比WebSocket好用

1、首先用cmd打开控制台输入npm install socket.io:用于服务器require使用

2、下载socket.io.js(去socket.io官网下载就好了)：用于客户端使用

3、编写服务器：

wsServer.js

//创建一个http服务器
var app = require('http').createServer()
// 把http封装成io对象
 var io =require('socket.io')(app) 


var PORT = 3000
var clientCount = 0

app.listen(PORT)

io.on('connection',function(socket){
    // 给每个用户取名字
    clientCount++
    socket.nickname = 'user' + clientCount
    
    // io.emit代表广播，socket.emit代表私发
    io.emit('enter',socket.nickname + '  comes in')

    socket.on('message',function(str){
        io.emit('message',socket.nickname + ' says: ' + str)
    })

    // 客户端断开，自带事件
    socket.on('disconnect',function(){
        io.emit('leave',socket.nickname + ' left')
    })
})

代码的一些说明：

1、socket表示传入的一个连接，io表示所有的连接

2、io.on(‘事件’，function（数据)）表示触发事件执行function（）处理客户端传入的数据

3、io.emit（‘事件’，数据），表示向所有客户端发送一个事件和数据

4、如果是一个就用socket.on和socket.emit()

4、编写客户端：

index.html

<!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>
    <script type="text/javascript" src="socket.io.js"></script>
</head>
<body>
    <h1>Chat Room</h1>
    <input id="sendTxt" type="text"/>
    <button id="sendBtn">发送</button>
    <div id="recv"></div>
    <script type="text/javascript">
       
       var socket = io("ws://localhost:3000/");
        
        //把接收的数据显示到界面
        function showMessage(str,type){
            var div = document.createElement('div');
            div.innerHTML = str;
            if(type == "enter"){
                div.style.color = 'blue';
            }else if(type == "leave"){
                div.style.color = "red"
            }
            document.body.appendChild(div)
        }

        // 点击之后发送
        document.getElementById("sendBtn").onclick = function(){
            var txt = document.getElementById("sendTxt").value;
            if(txt){        // 文本不为空发送
                socket.emit('message',txt);
            }
        }
        
        // 第一个enter代表是进入事件，第二个enter为了显示需要
        socket.on('enter',function(data){
            showMessage(data,'enter')
        })

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

        socket.on('leave',function(data){
            showMessage(data,'leave')
        })


    </script>
</body>
</html>

代码的一些说明：

1、引入socket.io.js

2、用io（）创建连接

3、和服务端一样，用on(),emit()发送和接收数据