websocket的基本使用，发送与响应_ws 发送消息,同步响应-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46187747/article/details/105613812

本文介绍了WebSocket协议在HTML5中的应用，它提供双向通信，常用于在线聊天。相较于定时器请求，WebSocket更高效。文章详细讲解了客户端和服务器端的实现代码，包括创建WebSocket实例、连接建立、事件监听及数据响应。

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

websocket

WebSocket是HTML5新增的协议，它的目的是在浏览器和服务器之间建立一个不受限的双向通信的通道，比如说，服务器可以在任意时刻发送消息给浏览器。

·websockett在各种电商的网站运用的比较常见（在线聊天）

在H5之前还多都是运用一个定时器来向服务器发送ajax请求

使用

首先先安装两个框架

ws
express或koa

npm install -S ws express

客户端代码

先创建websocket实例，并且建立连接
通过ws.send()给服务端发送请求
onmessage里的参数event来接收服务端返回来的响应

  methods: {
        outputMessage() {
            var ws = new WebSocket("ws://localhost:3000/ws/chat");
            let _this = this;
            ws.onopen = () => {
                // 点击发送按钮，将文本框的信息发送服务端
                ws.send(_this.data);
            };
  
        },
        webSocket() {
            var ws = new WebSocket("ws://localhost:3000/ws/chat");
            let _this = this;
            ws.onmessage = function(event) {
                console.log(event);
                _this.message.push(event.data);
            };
        },
	    mounted() {
	        this.webSocket();
	    }
    }
}

服务端代码

首先通过ws.Server创建WebSocketServer构造函数
new WebSocketServer里指定的server是监听的端口的返回值
通过WebSocketServer创建的实例，监听connection事件来连接,回调函数里有ws参数
通过监听ws里的message来拿到前端返回的数据
拿到数据则需要给客户端进行响应
具体参考以下代码

const Koa = require("koa");
const ws = require("ws");
const app = new Koa();

let server = app.listen(3000, () => {
    console.log("running...")
});

let WebSocketServer = ws.Server;
let wss = new WebSocketServer({
    server: server
})

wss.broadcast = function (data) {
    wss.clients.forEach(function (client) {
        client.send(data);
    });
};

wss.on("connection", function (ws) {
    ws.wss = wss;
    ws.on('message', function (message) {
        console.log(message);
        this.wss.broadcast(message);
    });

})