PPAPI的插件,原本是可以使用JS與瀏覽器交互的,[https://code.google.com/p/ppapi/wiki/InterfacingWithJavaScript](https://code.google.com/p/ppapi/wiki/InterfacingWithJavaScript),這里還提供了一個JS與plugin交互的文檔,但現在說不支持了,現在應該通過PPB_Messaging接口來完成Plugin和瀏覽器的交互,具體參考[https://src.chromium.org/viewvc/chrome/trunk/src/ppapi/c/ppb_messaging.h?revision=92312&view=markup](https://src.chromium.org/viewvc/chrome/trunk/src/ppapi/c/ppb_messaging.h?revision=92312&view=markup)這里。我實驗了一下,通了。
Messaging接口很好,傳遞的消息可以自已定義,類型也無限制,非常方便。
> foruok原創,如需轉載請關注foruok的微信訂閱號“程序視界”聯系foruok。
# 使用postMessage通信
Messaging接口與其它大多數接口一樣,分PPB和PPP兩側。分開來說明一下要做的事情。
### 插件側
要做這么些事情:
1. 實現PPP_Messaging接口,關鍵是void (*HandleMessage)(PP_Instance instance, struct PP_Var message)方法
1. 在Get_Interface中返回名字是PPP_MESSAGING_INTERFACE的接口
1. 在PPP_InitializeModule中獲取 PPB_Messaging、PPB_Var、PPB_VarArray、PPB_VarDictionary等接口。
PPB_Messaging的PostMessage用于向瀏覽器發送消息,發送過去的消息,JS代碼可以接收到。
PPB_Var可以用來構造String類型的Var,可以操作Var的引用計數
PPB_VarArray是數組接口,可以創建、訪問、設置數組
PPB_VarDictionary是字典(map)接口,可以創建字典Var,可以存取key-value對。
1. PPP_Messaging的HandleMessage處理瀏覽器的消息,如果需要,調用PPB_Messaging的PostMessage發送消息.
注意,插件側調用PPB_Var接口的VarFromUtf8時,傳入的len不包括’\0’在內。PPAPI的ppb_var.h的注釋里的示例代碼片段有誤,調用時傳遞的長度是sizeof(hello_world),應該減去一。
還有一點,插件和瀏覽器交互的數據,都是數據的拷貝哦,調用接口會發生復制行為。
### 瀏覽器側
瀏覽器側可以使用JavaScript來監聽插件發送的message事件,也可以使用插件元素的postMessage發送消息給插件。
基本上做下面幾件事即可:
1. 實現處理消息的JS函數,其參數是MessageEvent,data成員為插件發過來的信息,可以當做JS對象來訪問。
1. 監聽插件的message事件
1. 在合適的時候調用插件的postMessage(object)方法發送消息給插件
# 代碼
分插件代碼和HTML代碼。
### 插件代碼
代碼是在[**在PPAPI插件中創建本地窗口**](http://blog.csdn.net/foruok/article/details/50513228)一文示例代碼的基礎上改的,添加了消息處理的部分。只貼相關的部分了。
**獲取消息相關接口的代碼**
在PPP_InitializeModule中添加了獲取PPB_Messaging接口以及其它可能用到的PP_Var類型的接口,有Array和Dictionary。
~~~
g_var_interface = (const PPB_Var*)get_browser_interface(PPB_VAR_INTERFACE);
g_dictionary_interface = (const PPB_VarDictionary*)get_browser_interface(PPB_VAR_DICTIONARY_INTERFACE);
g_array_interface = (const PPB_VarArray*)get_browser_interface(PPB_VAR_ARRAY_INTERFACE);
g_message_interface = (const PPB_Messaging*)get_browser_interface(PPB_MESSAGING_INTERFACE);
~~~
**PPP_Messaging接口的實現**
PPP_Messaging接口的實現代碼如下:
~~~
void Plugin_HandleMessage(PP_Instance instance, struct PP_Var message)
{
char szLog[256] = { 0 };
sprintf_s(szLog, 256, "Plugin_HandleMessage, type = %d\r\n", message.type);
OutputDebugStringA(szLog);
if (message.type == PP_VARTYPE_DICTIONARY)
{
char command[] = "command";
struct PP_Var commandKey = g_var_interface->VarFromUtf8(command, sizeof(command) - 1);
struct PP_Var commandVar = g_dictionary_interface->Get(message, commandKey);
int len = 0;
const char *strCommand = g_var_interface->VarToUtf8(commandVar, &len);
g_var_interface->Release(commandKey);
sprintf_s(szLog, 256, "Plugin_HandleMessage, dict, command = %s, len = %d\r\n", strCommand, len);
OutputDebugStringA(szLog);
if (len == 0)
{
OutputDebugString(_T("Tang_plugin, recv invalid command\r\n"));
g_var_interface->Release(commandVar);
return;
}
if (strncmp(strCommand, "joinConf", len) == 0)
{
char confIdKey[] = "confId";
char userNameKey[] = "userName";
char *szConfId = 0;
char*szUserName = 0;
struct PP_Var idKey = g_var_interface->VarFromUtf8(confIdKey, sizeof(confIdKey) - 1);
struct PP_Var userKey = g_var_interface->VarFromUtf8(userNameKey, sizeof(userNameKey) - 1);
struct PP_Var var = g_dictionary_interface->Get(message, idKey);
const char *value = g_var_interface->VarToUtf8(var, &len);
if (len > 0)
{
szConfId = malloc(len + 1);
strncpy_s(szConfId, len+1, value, len);
szConfId[len] = 0;
}
g_var_interface->Release(var);
var = g_dictionary_interface->Get(message, userKey);
value = g_var_interface->VarToUtf8(var, &len);
if (len > 0)
{
szUserName = malloc(len + 1);
strncpy_s(szUserName, len+1, value, len);
szUserName[len] = 0;
}
g_var_interface->Release(var);
sprintf_s(szLog, 256, "Plugin_HandleMessage, dict, command = joinConf, user = %s, confId = %s\r\n", szUserName, szConfId);
OutputDebugStringA(szLog);
if (szConfId && szUserName)
{
sprintf_s(szLog, 256, "plugin got confId - %s, user - %s\r\n", szConfId, szUserName);
OutputDebugStringA(szLog);
joinConf(szConfId, szUserName);
}
else
{
OutputDebugString(_T("Invalid conference id or userName\r\n"));
}
if (szConfId) free(szConfId);
if (szUserName) free(szUserName);
g_var_interface->Release(idKey);
g_var_interface->Release(userKey);
/* fake attendees*/
char szMsgTypeValue[] = "userlist";
char szTypeKey[] = "type";
struct PP_Var typeKey = g_var_interface->VarFromUtf8(szTypeKey, sizeof(szTypeKey) - 1);
struct PP_Var typeValue = g_var_interface->VarFromUtf8(szMsgTypeValue, sizeof(szMsgTypeValue) - 1);
struct PP_Var attendee = g_dictionary_interface->Create();
g_dictionary_interface->Set(attendee, typeKey, typeValue);
struct PP_Var userArray = g_array_interface->Create();
char szUser1[] = "ZhangSan";
char szUser2[] = "LiSi";
struct PP_Var user1 = g_var_interface->VarFromUtf8(szUser1, sizeof(szUser1) - 1);
struct PP_Var user2 = g_var_interface->VarFromUtf8(szUser2, sizeof(szUser2) - 1);
g_array_interface->Set(userArray, 0, user1);
g_array_interface->Set(userArray, 1, user2);
char szValueKey[] = "value";
struct PP_Var valueKey = g_var_interface->VarFromUtf8(szValueKey, sizeof(szValueKey) - 1);
g_dictionary_interface->Set(attendee, valueKey, userArray);
g_message_interface->PostMessage(instance, attendee);
OutputDebugString(_T("Post attendee to browser"));
g_var_interface->Release(typeKey);
g_var_interface->Release(typeValue);
g_var_interface->Release(user1);
g_var_interface->Release(user2);
g_var_interface->Release(valueKey);
g_var_interface->Release(userArray);
g_var_interface->Release(attendee);
}
else if (strncmp(strCommand, "viewVideo", len) == 0)
{
char userIdKey[] = "userId";
char *szUserId = 0;
struct PP_Var idKey = g_var_interface->VarFromUtf8(userIdKey, sizeof(userIdKey) - 1);
struct PP_Var var = g_dictionary_interface->Get(message, idKey);
const char *value = g_var_interface->VarToUtf8(var, &len);
if (len > 0)
{
szUserId = malloc(len + 1);
strncpy_s(szUserId, len + 1, value, len);
szUserId[len] = 0;
}
if (szUserId)
{
sprintf_s(szLog, 256, "plugin got userId - %s\r\n", szUserId);
OutputDebugStringA(szLog);
viewVideo(szUserId, g_child_window);
}
else
{
OutputDebugString(_T("Invalid viewVideo command without userId\r\n"));
}
if (szUserId) free(szUserId);
g_var_interface->Release(var);
g_var_interface->Release(idKey);
}
g_var_interface->Release(commandVar);
}
else if (message.type == PP_VARTYPE_STRING)
{
char hello_world[] = "Hello world!";
struct PP_Var var = g_var_interface->VarFromUtf8(hello_world, sizeof(hello_world) - 1);
g_message_interface->PostMessage(instance, var); // var will be copyed
g_var_interface->Release(var);
}
}
static PPP_Messaging message_interface = {
&Plugin_HandleMessage
};
~~~
有點長,比較潦草。
**返回PPP_Messaging的代碼**
完整的PPP_GetInterface函數如下:
~~~
PP_EXPORT const void* PPP_GetInterface(const char* interface_name) {
if (strcmp(interface_name, PPP_INSTANCE_INTERFACE) == 0)
{
OutputDebugString(_T("PPP_GetInterface, instance_interface\r\n"));
return &instance_interface;
}
else if (strcmp(interface_name, PPP_INPUT_EVENT_INTERFACE) == 0)
{
OutputDebugString(_T("PPP_GetInterface, input_interface\r\n"));
return &input_interface;
}
else if (strcmp(interface_name, PPP_MESSAGING_INTERFACE) == 0)
{
OutputDebugString(_T("PPP_GetInterface, message_interface\r\n"));
return &message_interface;
}
return NULL;
}
~~~
### 網頁代碼
網頁代碼如下:
~~~
<!DOCTYPE html>
<html>
<!--
Copyright (c) 2016 foruok@微信訂閱號“程序視界”(programmer_sight).
All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->
<head>
<style type="text/css">
#contacts
{
margin: 10px;
width: 300px;
height: 200px;
background-color: gray;
}
</style>
<script type="text/javascript">
function handleMessage(message) {
alert(message.data.type);
if(message.data.type.localeCompare("userlist") == 0){
var i = 0;
ul = document.getElementById("attendee");
for(; i < message.data.value.length; i++){
var li = document.createElement("li");
li.appendChild(document.createTextNode(message.data.value[i]));
ul.appendChild(li);
}
}
}
function joinConference(){
plugin = document.getElementById('tangplugin');
plugin.postMessage({
command:"joinConf",
confId: document.getElementById("confId").value,
userName: document.getElementById("userName").value
});
}
function viewSharedVideo(){
plugin = document.getElementById('tangplugin');
plugin.postMessage({
command:"viewVideo",
userId: document.getElementById("userId").value
});
}
function initialize() {
plugin = document.getElementById('tangplugin');
plugin.addEventListener('message', handleMessage, false);
}
document.addEventListener('DOMContentLoaded', initialize, false);
</script>
<title>Tang in Plugin</title>
</head>
<body>
<form>
ConferenceID: <input type="text" id="confId" /> User:
<input type="text" id="userName" /> <input type="button" value="Join" onclick="joinConference()"/>
</form>
<hr>
<div id="contacts">
<p>contacts:</p>
<ul id="attendee">
<!--
here will show attendee list, added by JS callback
-->
</ul>
UserId:<input type="text" id="userId" /> <button type="button" onclick="viewSharedVideo()">View Video</button>
</div>
<p>share video:</p>
<embed id="tangplugin" type="application/x-ppapi-tang-video" width="300px" height="200px" top="40px" left="20px">
</body>
</html>
~~~
Join按鈕會獲取它前面兩個文本框的內容,發送給插件,插件返回一個用戶列表,網頁解析(HandleMessage方法)出來,動態修改用戶列表。
# 運行效果
貼兩幅圖,點擊Join按鈕之前是醬紫的:

點擊Join按鈕后是醬紫的:

其他參考文章:
- [**CEF Windows開發環境搭建**](http://blog.csdn.net/foruok/article/details/50468642)
- [**CEF加載PPAPI插件**](http://blog.csdn.net/foruok/article/details/50485448)
- [**VS2013編譯最簡單的PPAPI插件**](http://blog.csdn.net/foruok/article/details/50485461)
- [**理解PPAPI的設計**](http://blog.csdn.net/foruok/article/details/50486788)
- [**PPAPI插件與瀏覽器的交互過程**](http://blog.csdn.net/foruok/article/details/50494061)
- [**Windows下從源碼編譯CEF**](http://blog.csdn.net/foruok/article/details/50498740)
- [**編譯PPAPI的media_stream_video示例**](http://blog.csdn.net/foruok/article/details/50498873)
- [**PPAPI插件的繪圖與輸入事件處理**](http://blog.csdn.net/foruok/article/details/50499813)
- [**在PPAPI插件中創建本地窗口**](http://blog.csdn.net/foruok/article/details/50513228)
- 前言
- CEF Windows開發環境搭建
- CEF加載PPAPI插件
- VS2013編譯最簡單的PPAPI插件
- 理解PPAPI的設計
- PPAPI插件與瀏覽器的交互過程
- Windows下從源碼編譯CEF
- 編譯PPAPI的media_stream_video示例
- PPAPI插件的繪圖與輸入事件處理
- 在PPAPI插件中創建本地窗口
- PPAPI插件與瀏覽器的通信
- Windows下從源碼編譯Skia
- 在PPAPI插件中使用Skia繪圖
- 加載DLL中的圖片資源生成Skia中的SkBitmap對象
- PPAPI+Skia實現的涂鴉板
- PPAPI中使用Chromium的3D圖形接口
- PPAPI中使用OpenGL ES繪圖