websocket的API使用及node.js搭建websocket服务

最新推荐文章于 2024-08-27 20:59:26 发布

AC它真的很香

最新推荐文章于 2024-08-27 20:59:26 发布

阅读量498

点赞数

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

本文链接：https://blog.csdn.net/Erin_jwx/article/details/120047978

版权

前端专栏收录该内容

26 篇文章 0 订阅

订阅专栏

本文展示了如何使用WebSocket进行实时通信。客户端通过HTML、CSS和JavaScript创建了一个简单的输入框、按钮和显示区域，并建立与本地WebSocket服务器的连接。当用户点击发送按钮时，输入的内容将通过WebSocket发送到服务器。服务端使用nodejs-websocket库监听3000端口，接收并响应客户端的消息，同时处理连接和断开事件。

摘要由CSDN通过智能技术生成

客户端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <input type="text" placeholder="请输入内容">
    <button>发送</button>
    <div></div>
    <script>
        var input = document.querySelector('input');
        var button = document.querySelector('button');
        var div = document.querySelector('div')
        // 1.创建WebSocket对象
        var socket = new WebSocket('ws://localhost:3000');
        // 2.当和websocket服务连接成功的时候触发
        socket.addEventListener('open',function(){
            div.innerHTML = '连接服务成功了'
        })
        // 3.主动的给websocket服务发送消息
        button.onclick = function(){
            socket.send(input.value);
        }
        // 4.接收websocket服务的数据
        socket.addEventListener('message',(e)=>{
            div.innerHTML = e.data;
        })
        socket.addEventListener('close',()=>{
            console.log('服务断开连接');
        })
    </script>
</body>
</html>

服务端代码

// 最开始要安装 在终端输入 npm install nodejs-websocket
// 1.导入nodejs-websocket
var ws = require('nodejs-websocket');
// 2.创建一个server
// 每次只要有用户连接，函数就会被执行，会给当前连接的用户创建一个connect对象
const server = ws.createServer(connect =>{
    console.log("有用户连接上来了");
    // 每当接收到用户传递过来的数据，这个text事件会被触发
    connect.on('text', data => {
        console.log("接受到了用户的数据",data);
        // 给用户一个响应的数据
        connect.send(data);
    })
    // 只要websocket连接断开，close事件就会触发
    connect.on('close',()=>{
        console.log('连接断开了');
    })
    // 注册一个error，处理用户的错误信息
    connect.on('error',()=>{
        console.log('用户连接异常');
    })
})
server.listen(3000,()=>{
    console.log('websocket服务启动成功了，监听端口3000');
})