最简单的WebSocket连接

dachai_dbhc

已于 2024-01-31 10:41:05 修改

阅读量633

点赞数 2

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

于 2024-01-31 10:35:14 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44765931/article/details/135948002

版权

前端专栏收录该内容

6 篇文章

订阅专栏

本文介绍了HTML5WebSocket协议的基本原理，展示了如何在Node.js服务端创建WebSocket服务器并发送消息，以及前端如何使用WebSocket进行跨域连接，包括错误处理和重连机制。

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

介绍

WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信，同时允许跨域通讯。
websocket跨域探讨：
https://www.imooc.com/article/21976
https://www.jianshu.com/p/9a8d793ec52a

直接上代码

服务端：在代码工程中找个地方新建文件serve.js

var WebSocketServer = require('ws').Server,
	server = new WebSocketServer({
	    port: 3000
	}); //服务端口3000
server.on('connection', function (ws) {
    console.log('服务端：客户端已连接');
    // 发送信息给前端
    ws.send('111111');
    ws.on('message', function (message) {
        //打印客户端监听的消息
        console.log(message);
    });
});

在serve.js的父文件夹下运行：node serve.js

前端（支持跨域，可在不同代码工程中连接）：

initEventHandle() {
    // http：ws，https：wss
    this.ws = new WebSocket('ws://localhost:3000')
    this.ws.onopen = () => {
        console.log('websocket连接------------------------');
    }
    this.ws.onmessage = evt => {
        console.log('websocket接收信息------------------------', evt);
        const data = JSON.parse(evt.data)
    }
    this.ws.onerror = () => {
        // this.ws.onclose()
        // 60秒后重连
        this.timer = setTimeout(() => {
            console.log('websocket重连------------------------');
            this.initEventHandle()
        }, 60*1000)
    }
    this.ws.onclose = () => {
        console.log('websocket断开------------------------');
    }
}