使用websocket完成简易的聊天功能

最新推荐文章于 2024-02-21 15:03:39 发布

涌。。

最新推荐文章于 2024-02-21 15:03:39 发布

阅读量250

点赞数 1

分类专栏： websocket 文章标签： node.js jquery 前端

本文链接：https://blog.csdn.net/qq_42342276/article/details/114262217

版权

websocket 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

使用websocket完成简易的聊天功能

一、使用步骤

服务端

1、下载模块包：npm i nodejs-websocket
2、引入包：

const ws = require('nodejs-websocket');

3、创建服务
只要有用户连接该服务器，该函数就会被调用，给每个用户创建一个connect对象

const server = ws.createServer(connect =>{       
    
});

4、监听(设置)端口号

server.listen(8080,()=>{
    console.log('websocket服务启动成功，端口号：8080');
});

5、事件处理
1)text事件：每当接收到用户传过来的数据，都会触发‘text’事件
2)close事件：当用户与服务器连接断开,将触发‘close’事件
3)error事件，避免用户与服务器连接断开时，服务器报错

6、将信息发送到客户端
1）给当前的用户发（用到了connect对象，因此要写在创建服务的函数createServer里）

connect.send(data);

2）给连接了服务器的所有人发：要用到server.connections，它表示连接服务器的所有人

function broadcast(msg){
    //server.connections:表示连接服务器的所有人
    var val = JSON.stringify(msg);
    server.connections.forEach(item=>{
        item.send(val);             //给所有人都发送该消息，注：send只允许接收字符串
    })
}

客户端

1、创建websocket对象，与服务器创建连接。注：这里的端口号要和服务器设置的端口号一致

var socket = new WebSocket('ws://localhost:8080');

2、事件处理
1)open事件：与服务器连接成功时触发‘open’事件
2)message事件：当接收到服务器发送的消息时触发‘message’事件
3、向服务器发送数据

 socket.send(value);

二、完整代码

服务端app.js

const ws = require('nodejs-websocket');
let currentNum = 0;       //当前连接人数
/*
    @TYPE_ENTER=0：信息类型为用户进入聊天室的提示信息
    @TYPE_INFO=1：信息类型为用户发送的信息
    @TYPE_LEAVE=2：信息类型为用户离开聊天室的提示信息
* */
const TYPE_ENTER =0,TYPE_INFO=1,TYPE_LEAVE=2;    //消息类型

//只要有用户连接该服务器，该函数就会被调用，给每个用户创建一个connect对象
const server = ws.createServer(connect =>{        //相当于function(connect){}
    currentNum++;
    connect.userName = `用户${currentNum}`;
    broadcast({
        type:TYPE_ENTER,
        msg:`${connect.userName}进入了聊天室`,
        time:new Date().toLocaleTimeString()
    });

    //每当接收到用户传过来的数据，都会触发‘text’事件
    connect.on('text',data=>{
        // connect.send(data);           //将接收到的数据给用户发回去
        broadcast({
            type:TYPE_INFO,
            msg:`${connect.userName}:${data}`,
            time:new Date().toLocaleTimeString()
        });
    });

    //当用户与服务器连接断开,将触发‘close’事件
    connect.on('close',()=>{
        console.log('连接断开了');
        broadcast({
            type:TYPE_LEAVE,
            msg:`${connect.userName}离开了聊天室`,
            time:new Date().toLocaleTimeString()
        });
        currentNum--;
    });

    //处理‘error’事件，避免用户与服务器连接断开时，服务器报错
    connect.on('error',()=>{
        console.log('连接异常');
    })
});

//给所有人发送数据
function broadcast(msg){
    //server.connections:表示连接服务器的所有人
    var val = JSON.stringify(msg);
    server.connections.forEach(item=>{
        item.send(val);             //给所有人都发送该消息，注：send只允许接收字符串
    })
}

server.listen(8080,()=>{
    console.log('websocket服务启动成功，端口号：8080');
});

客户端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box{
            width: 200px;
            height: 200px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
<input type="text" value=""><button type="button">发送</button>
<div class="box"></div>
</body>
<script src="jquery.js"></script>       //这里要引入jQuery文件
<script type="text/javascript">
    const TYPE_ENTER =0,TYPE_INFO=1,TYPE_LEAVE=2;

    //创建websocket对象，与服务器创建连接
    var socket = new WebSocket('ws://localhost:8080');

    //与服务器连接成功时触发‘open’事件
    socket.addEventListener("open",function () {
        $("div").html("连接成功")
    });

    //当接收到服务器发送的消息时触发‘message’事件
    socket.addEventListener("message",function (e) {
        // console.log(e);
        var val = JSON.parse(e.data);
        var info = document.createElement('div');
        info.innerText = val.msg;
        if(val.type == TYPE_ENTER){
            $(info).css("color","green");
        }else if(val.type == TYPE_INFO){
            $(info).css("color","black");
        }else {
            $(info).css("color","red");
        }
        $(".box").append(info);
    });

    $("button").click(function () {
        var value = $("input").val();
         socket.send(value);          //向服务器发送数据
         $('input').val('');
    })
</script>
</html>