Hapi.js 实现 Websocket 推送的使用技巧分享-JavaScript中文网-JavaScript教程资源分享门户

前言

随着 Web 技术的不断发展，Websocket 已经成为了前端开发中不可或缺的一部分。Websocket 在实时性要求较高的场景中效果突出，比如聊天室、实时监控等应用。

用 Hapi.js 实现 Websocket 推送需求，不仅可以满足实时性的要求，同时也具有自带的插件化管理、代码可读性高、性能稳定等优点，可以提高开发效率。

本文将介绍 Hapi.js 实现 Websocket 推送的使用技巧，便于开发者在实际项目中进行开发。

Hapi.js 实现 Websocket 推送

Hapi.js 是一个开源的 Node.js Web 应用框架，具有强大的路由配置、插件管理、日志管理等功能。下面我们就来介绍如何用 Hapi.js 实现 Websocket 推送。

首先需要安装 hapi 和 hapi-websocket 两个依赖，安装命令如下：

$ npm install hapi
$ npm install hapi-websocket

1. 设置 websocket 路由

设置 websocket 路由是实现 Hapi.js 推送 Websocket 的关键步骤。代码如下：

// javascriptcn.com 代码示例
const Hapi = require('hapi');
const HapiWebSocket = require('hapi-websocket');

const server = Hapi.server({
    host: 'localhost',
    port: 3000
});

server.register({
    plugin: HapiWebSocket,
    options: {
        parsers: ['application/json']
    }
});

server.route({
    method: 'GET',
    path: '/{param*}',
    handler: {
        directory: {
            path: 'public'
        }
    }
});

server.route({
    method: 'GET',
    path: '/websocket',
    config: {
        id: 'websocket',
        handler: (request, h) => {
            return h
                .response()
                .hold()
                .rewritable(true)
        },
        upgrade: 'websocket'
    }
});

上面的代码中，我们定义了一个 websocket 路由，路由地址为 /websocket。其中，hold() 方法可以让服务端在当前连接上保持，等待消息传递；rewritable(true) 可以允许路由地址可以被重新设置。

2. 编写前端页面

Websocket 的通信是基于前端页面和服务端之间的，因此在前端需要编写一个页面用于接收服务端传来的消息。代码如下：

// javascriptcn.com 代码示例
<!doctype html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Hapi WebSocket Example</title>
</head>

<body>
    <h1>Hapi WebSocket Example</h1>

    <div id="messages"></div>

    <form id="form">
        <input type="text" id="message" />
        <button type="submit">Send</button>
    </form>

    <script>
        var ws = new WebSocket('ws://localhost:3000/websocket'); // 连接服务端
        ws.onmessage = function(event) { // 接收服务端传来的消息
            var messages = document.getElementById('messages');
            var message = document.createElement('div');
            message.innerHTML = event.data;
            messages.appendChild(message);
        };

        var form = document.getElementById('form');
        form.onsubmit = function(event) { // 发送消息给服务端
            event.preventDefault();
            var input = document.getElementById('message');
            ws.send(input.value);
            input.value = '';
        };
    </script>
</body>

</html>

上面的代码中，我们定义了一个页面，用于接收服务端传来的消息，并发送消息给服务端。通过这个页面，我们就可以和服务端进行双向消息传递。

3. 服务端广播消息

在服务端，通过订阅消息可以将消息发送给所有连接的客户端。代码如下：

// javascriptcn.com 代码示例
const Hapi = require('hapi');
const HapiWebSocket = require('hapi-websocket');

const server = Hapi.server({
    host: 'localhost',
    port: 3000
});

server.register({
    plugin: HapiWebSocket,
    options: {
        parsers: ['application/json']
    }
});

server.route({
    method: 'GET',
    path: '/{param*}',
    handler: {
        directory: {
            path: 'public'
        }
    }
});

server.route({
    method: 'GET',
    path: '/websocket',
    config: {
        id: 'websocket',
        handler: (request, h) => {
            return h
                .response()
                .hold()
                .rewritable(true)
        },
        upgrade: 'websocket'
    }
});

server.events.on('start', () => {
    console.log(`Server running at: ${server.info.uri}`);
});

const sendMessage = (message) => {
    server.plugins['hapi-websocket'].broadcast(message);
};

setInterval(() => {
    sendMessage(`Current time is: ${new Date().toLocaleTimeString()}`);
}, 1000);

上面的代码中，我们通过 setInterval 定时向服务端发送消息，并使用 server.plugins['hapi-websocket'].broadcast 将消息发送给所有连接的客户端。

总结

通过上述的介绍，我们可以看出 Hapi.js 实现 Websocket 推送是一种比较方便、高效的方式。同时，通过本文的学习和实践，开发者可以深入了解 Hapi.js 的插件化管理、路由配置等功能，为实际项目的开发提供指导和借鉴。

示例代码

示例代码可以在 Github 上进行查看和下载：https://github.com/lichaochao0616/hapi-websocket-example

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652f31d27d4982a6eb04452b