使用 Node.js 使 WordPress 网站更具交互性

引言

为您的网站添加交互功能可改善用户体验，进而鼓励重复访问。通过提供增强功能，例如第二屏幕应用程序或简单的聊天功能，您可以吸引您的受众并让他们对您的内容保持兴趣。有许多解决方案可以使 WordPress 网站更具动态性，其中一种方法是使用 Node.js。

什么是 Node.js

Node.js 是一个用于服务器端开发和网络应用程序的跨平台运行时环境。Node.js 使用 JavaScript 编写，其应用程序是事件驱动、轻量级且高效的——是数据密集型实时应用程序的理想解决方案。更多信息，请访问 https://node.org.cn/。

Node.js 拥有许多可用于构建项目的包。借助 Node 包管理器，您可以轻松维护这些包并在需要时安装新包。您还可以使用 package.json，其中包含名称和版本等字段。利用 package.json 可以轻松安装所有依赖项并维护您的项目。

创建服务器

此过程的第一步是创建服务器。构建可重用的全局变量可以节省时间。因此，我经常从创建变量开始。主变量是 config，它包含 Node.js 服务器的端口号以及调用它的网站的详细信息。记录此信息很重要，但在此示例中并非必需。

var config = {}
    , channel = []
    , clients = [];

config.port = 9000;
config.application_host = ‘wordpress.dev';
config.application_port = 80;

接下来，加载所需的模块并开始创建 Web 服务器和套接字服务器。在本例中，我将使用 socket.io 作为套接字，并使用 WordPress Utils 代码，这是我目前正在开发的一个项目。有关此项目的更多信息，请访问 GitHub：https://github.com/markoheijnen/node-wordpress-utils。

var app = require('http').createServer(handler),
	io = require('socket.io').listen(app),
	wordpress = require("wordpress-utils");

app.listen(config.port);

function handler(req, res) {

}

将 WordPress 与 Socket.io 集成

为了将 WordPress 连接到现有代码，需要完成两项工作。首先，入队 socket.io 脚本。本示例中使用的脚本可以在 https://socketio.node.org.cn/ 找到。

其次，入队您自己的脚本以建立连接。使用 wp_localized_script() 来发送 Node.js 服务器的 URL 和 JSON REST API 的 nonce，方法是使用 wp_create_nonce( 'wp_json' )。目前，WordPress Utils 代码只能与 JSON REST API 插件结合使用，该插件可以在 GitHub 上找到：github.com/WP-API/WP-API。

您可以开始在自己的脚本中构建代码。例如，基本代码如下所示：

var socket = io.connect( wp_nodejs.url, { query: { token: wp_nodejs.nonce } });

// Default callbacks
socket.on('connect', function () {
	console.log('connected');
});

socket.on('disconnect', function () {
	console.log('disconnected');
});

// Custom callback
socket.on('publish', function (data) {
	console.log(data);
});

使用 Socket.io 连接 WordPress 用户

现在我们已经设置了变量，并准备开始编写与 WordPress 交互的代码。

在以下代码中，连接后，我们会将 cookie 和 token 传递给我们的 WordPress 模块进行验证。它将首先检查 cookie 数据是否仍然有效。验证后，它将调用 JSON REST API 进行最终检查。它还将接收大量信息，包括用户的权限。

io.on('connection', function (socket) {
	clients[socket.id] = socket;

	socket.wp_user = wordpress.connect( socket.handshake.headers.cookie, socket.handshake.query.token );

	socket.wp_user.on('wp_connected', function ( data ) {
		console.log( 'connected: ' + socket.wp_user.logged_in );
	});

	socket.wp_user.on('wp_connect_failed', function ( e ) {
		console.log( 'failed' );
	});


	// When socket disconnects, remove it from the list:
	socket.on('disconnect', function() {
		delete clients[socket.id];
	});
});

下一步

此时，您已经建立了连接 WordPress 和 Node.js 服务器的基础——但它还没有任何功能。代码仍需要提供才能使其正常运行。在下面的示例中，我们将向满足特定条件的访客发送一个视频。

WordPress 代码

这是我目前用于连接 Node.js 和发送新视频的完整类。可以进行的唯一更改是发送 cookie 数据和 token，以便您可以再次验证用户。这样做，您可以检查多次权限，从而使其真正安全。

<?php

class Nodejs {
	private static $status = null;
	private static $url    = 'http://wordpress:9000/';
	private static $key    = 'a_secret_key';

	public function __construct() {
		self::$url = home_url() . ':9000/';

		add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_scripts' ) );
	}

	public function enqueue_scripts() {
		wp_enqueue_script( 'socket.io', self::$url . 'socket.io/socket.io.js' );
	}


	public static function get_url() {
		return self::$url;
	}

	public static function status() {
		if ( self::$status !== null ) {
			return self::$status;
		}

		self::$status = false;

		$response = wp_remote_get( self::$url . 'status', array( 'timeout' => 1 ) );

		if ( 200 == wp_remote_retrieve_response_code( $response ) ) {
			self::$status = true;
		}

		return self::$status;
	}

	public static function publish( $channel, $url ) {
		if ( ! self::status() ) {
			return false;
		}

		$args = array(
			'headers' => array(
				'x-request-identification' => self::$key,
				'content-type' => 'application/json'
			),
			'body' => json_encode(
				array(
					'url'     => $url
				)
			)
		);
		$response = wp_remote_post( self::$url . 'publish', $args );

		if ( 200 == wp_remote_retrieve_response_code( $response ) ) {
			return true;
		}

		return false;
	}

}

Node.js 代码

在 Node.js 部分，我们开始使用 handler 函数。

function handler(req, res) {
	if (req.url == "/status") {
		res.writeHead( 200 );
		res.end();
		return;
	}

	if( req.headers['x-request-identification'] == ‘a_secret_key’ ) {
		var fullBody = '';

		req.on('data', function(chunk) {
			fullBody += chunk.toString();
		});

		req.on('end', function() {
			if (req.url == "/publish") {
				var json = JSON.parse(fullBody);

				if( json.url ) {
					channel.url = json.url;
					io.sockets.emit('publish', { url : json.url });
				}
				else {
					 res.writeHead(500);
				}
			}

			res.end();
		});
	}

	res.writeHead( 404 );
	res.end();
}

这会将从 WordPress 传递过来的视频直接发送给所有当前用户。但是，您仍然需要通过调整用户连接已建立的部分来发送特定视频。为此，我们添加了几行代码，将 YouTube URL 发送给我们的新访客。

io.on('connection', function (socket) {
	// The previous code

	if( channel.url ) {
		socket.emit('publish', { url: channel.url });
	}
}

前端代码

最后一步是在 WordPress 端侦听 JavaScript 代码中的事件。然后，向我们的发布事件添加一个侦听器。我建议在那里添加一个检查，以查看是否已传递 URL。如果为空，我们可以看到没有活动会话。

socket.on('publish', function (data) {
	if( data && data.url ) {
		reload_channel_html(data.url);
	}
	else {
		reload_channel_html('');
	}
});

function reload_channel_html( link ) {
	var channel = jQuery('.channel-movie');

	if( link ) {
		if( link.indexOf('youtube.com') ) {
			link += '?autoplay=1';
		}

		channel.html('<iframe width="100%" height="315" src="' + link + '" frameborder="0" allowfullscreen></iframe>');
	}
	else {
		channel.html('Currently there is no live session.');
	}
}

结论

本教程中的示例只是 WordPress 可以实现的众多炫酷功能之一，尤其是在添加增强功能方面。作为起点，我希望它能为您提供一些启发。Node.js 是可以扩展 WordPress 用户体验的技术之一。但 Node.js 和 WordPress 还有许多其他可以做的事情。

提供积极的用户体验对于在线成功至关重要。确保您的网站托管套餐能够满足您交互式 WordPress 网站的性能需求非常重要。选择超出您日常需求的服务可以确保您网站的可用性和性能。 1&1 的 WordPress 托管为即使是最耗资源的 WordPress 项目也提供了方便而强大的环境。

有关如何最佳使用 WordPress 的更多技巧和建议，无论是初学者还是高级用户，请访问 1&1 的社区门户或 1&1 博客。