webScoket

Seven_Ting

已于 2023-08-02 12:00:08 修改

阅读量478

点赞数

分类专栏： webSocket 文章标签： javascript 前端开发语言

于 2023-08-01 21:17:40 首次发布

本文链接：https://blog.csdn.net/Seven_Ting/article/details/132050751

版权

webSocket 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

webScoket是什么？

支持端对端通讯
可以由客户端发起，也可以有服务端发起
用于消息通知、直播间讨论区、聊天室、协同编辑等

做一个简单的webScoket

客户端配置：

1、新建一个页面叫web-scoket.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webScoket</title>
</head>
<body>
    <p>webScoket</p>
    <button id="btn-send">发送消息</button>
    <script>
        const btnSend = document.getElementById('btn-send')
    </script>
</body>
</html>

2、进行连接服务器端的基本操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webScoket</title>
</head>
<body>
    <p>webScoket</p>
    <button id="btn-send">发送消息</button>
    <script>

        //端口的3000要对应服务端的端口
        const ws = new WebSocket('ws://127.0.0.1:3000')
        //连接成功！
        ws.onopen = () => {
            //连接成功后，往服务端发送信息
            ws.send('客户端连接成功！')
        }
        //接收信息
        ws.onmessage = (val) => {
            console.info('收到',val)
        }

        const btnSend = document.getElementById('btn-send')
    </script>
</body>
</html>

服务器端配置：

1、进入一个目录执行npm init -y

注意：执行以上命令，会生成一个package.json的文件

{
  "name": "web-scoket-sever",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

2、安装ws和nodemon插件、以下是安装插件的命令

sudo cnpm i ws
sudo cnpm i nodemon

3、在文件夹下新建一个src目录，在src目录下新建index.js文件

const { WebSocketServer } = require('ws')

//new 一个webScoket服务，端口号为3000
const wsServer = new WebSocketServer({ port: 3000 })

//监听连接connection，
wsServer.on('connection', wx => {
    console.info('connection');

    //监听信息，msg客户端传递过来的信息
    wx.on('message', msg => {
        console.info('收到信息', msg.toString());

        //收到信息2秒后，给客户端一个反馈
        setTimeout(() => {

            //ws.send给客户端发送信息
            wx.send('服务端已收到信息！' + msg.toString())
        }, 2000)
    })
})