2016-07-13 6 views
0

특정 트 위치 채널의 채팅 봇의 속삭임 메시지에 따라 Twitch.tv의 일부 요소를 조정하는 greasemonkey 스크립트가 있습니다. 내 목표는 속삭임 채팅을 관찰하고, 새로운 모든 채찍꾼 메시지를 읽고, 그에 따라 조정하고, 채팅 창을 닫아서 내가 속삭임을 받았다는 것을 알지 못하게하는 것입니다.Greasemonkey로 Twitch Whisper 메시지 읽기

나는 Greasemonkey, HMTL 또는 Javascript에 익숙하지 않습니다. 내가 안정적으로 작동 않습니다 관찰을 말할 수있는 지금까지

// Observe twitch whisper chat 
    var whisperArea = document.getElementsByClassName('conversations-manager')[0]; 
    observeDOM(whisperArea ,function(){ 
    NewWhisperMessage(); 
    }); 

:이 작업을 수행하는 내가 아는 유일한 방법은 모든 속삭임 창 (conversation-manager)를 포함하는 클래스에 observeDOM를 사용하는 것입니다. 이제는하지 않는 부분 : 내 방법 NewWhisperMessage 그 자체.

우선 첫 번째 접근 방법을 설명하고자합니다. 처음에는 모든 새로운 속삭임을 찾으려고 노력했습니다. 속삭임이 수신되면 속삭임 창이 열립니다. 속삭임 창 자체가 mutliple 메시지 라인은 다음과 같이 구축이 있습니다

<div class="ember-view conversation-chat-line incoming" title="Sat Jul 09 2016 11:52:38 GMT+0200" id="ember2564"> 
<span style="" class="from">NameOfMessageWriter</span> 
<span class="colon">:</span> 
<span style="" class="message"> 
     Here is the message! 
     </span> 
</div> 

일반적으로,이 순간에 난 그냥

var allChatMessages = document.getElementsByClassName("conversation-chat-line"); 
var newestChatMessage = allChatMessages[allChatMessages.length - 1]; 

이 somtimes 작동에 의해 클래스 conversation-chat-line의 마지막 요소를 취할 것입니다 만 가지입니다 하나의 DOM 업데이트에 도착하는 멀티 파일 메시지가있는 것 같기 때문에 신뢰할 수 없습니다 (이것이 의미가 있습니까?). 이 사실을 알았을 때, 나는 좀 더 안정적으로 작동하지만 여전히 오히려 실패하는 것처럼 보이는 더 복잡한 아이디어를 생각해 냈습니다.

1)이이 세션의 첫 번째 새로운 속삭임 경우 (LastWhisperTitle 여전히 비어)를 출발점을 찾을 수 있습니다

내 접근 방식은 4 단계로 약 작동합니다. 이를 위해 트위치 채팅 창에서 새로운 속삭임 메시지 (클래스 new-message-divider)에 대한 seperator 요소를 찾으려고합니다. 거기에서 바로 전에 채팅 메시지를 가져오고이 메시지의 메시지 텍스트 인 title을 저장하려고합니다. 메시지를 고유하게 식별합니다 (속삭임 창이 닫히고 다시 열릴 때 변경되기 때문에 id 속성을 사용할 수 없습니다).이 단계는 한 번만 수행됩니다.이 단계는 한 번만 수행됩니다 .2) 이제 모든 채팅 메시지에 대해 반복적으로 모든 메시지를 건너 뜁니다. 마지막 두 변수 (제목 및 메시지 텍스트)로 식별됩니다. 모든 채팅 메시지를 받으려면 getElementsByClassName을 사용하십시오. 이 최신 메시지의 색인을 저장하고 3 단계부터 시작하십시오.)

3) 첫 번째 새 채팅 메시지의 색인을 가지고 반복하여 각 메시지를 순서대로 처리하고 구문 분석을 시작합니다.

4) 새 메시지를 읽을 때 속삭임 창을 닫습니다.

을 (조건부은 새로운 메시지가 도착하지 않을 때 수동으로 귓속말 창을 열 수 있습니다) 그리고 여기에 마지막 mehtod입니다 :

var LastWhisperTitle = ""; 
var LastWhisperMessage = ""; 
var ChannelName = "NameOfChatBot" 

function NewWhisperMessage(){ 

    if(LastWhisperTitle == "") { 
     // New Session: Find first new whisper 

     // Find new message divider 
     var newMessageDividerArray = document.getElementsByClassName("new-message-divider"); 
     var newMessageDivider = newMessageDividerArray[newMessageDividerArray.length - 1]; 

     // Find newest message already read 
     var sibling = newMessageDivider.previousSibling; 
     while(sibling) { 
      if(sibling.nodeType == 1) { 
       if(sibling.className != "undefined"){ 
        if(sibling.className.indexOf("conversation-chat-line") > -1) { 
         break; 
        } 
       } 
      } 
      sibling = sibling.previousSibling; 
     } 
     if(!sibling){ 
      return; 
     } 

     // Store this message as last read whisper 
     LastWhisperTitle = sibling.title; 
     LastWhisperMessage = sibling.getElementsByClassName("message")[0].textContent.trim(); 
    } 

    // Get all messages 
    var whisperMessageArray = document.getElementsByClassName("conversation-chat-line"); 
    var foundNewMessage = false; 

    // Find index in array of the first new message 
    var firstNewMessageIndex = 0; 
    for(i = whisperMessageArray.length - 1; i >= 0; i--){ 
     var currentWhisper = whisperMessageArray[i]; 
     var currentTitle = currentWhisper.title; 
     var currentMessage = currentWhisper.getElementsByClassName("message")[0].textContent.trim() 

     if(currentTitle == LastWhisperTitle && currentMessage == LastWhisperMessage){ 
      // This message was already read -> the message with the previous index is new 
      if(i == whisperMessageArray.length - 1) { 
       // No new message 
       return; 
      } else { 
       firstNewMessageIndex = i+1; 
       break; 
      } 
     } 
    } 

    if(firstNewMessageIndex == 0){ 
     // No new message 
     return; 
    } 

    // Parse all messages from index to newest message 
    for(i = firstNewMessageIndex; i < whisperMessageArray.length; i++){ 
     var currentWhisper = whisperMessageArray[i]; 
     var writer = currentWhisper.getElementsByClassName("from")[0].textContent; 
     var message = currentWhisper.getElementsByClassName("message")[0].textContent.trim(); 

     if(writer == ChannelName){ 
      ParseWhisperMessage(message); 
      foundNewMessage = true; 
     } 
     LastWhisperTitle = currentWhisper.title; 
     LastWhisperMessage = message; 
    } 

    if(foundNewMessage){ 
     // Close Chat Window 
     CloseWhisperWindow(); 
    } 

} 

나는 여전히에서 일부 또는 없음의 속삭임 메시지를 읽을 수있는 문제가 . 내 접근 방식에 문제가있을 수 있습니까?

+0

실례가 없다면 말하기 어렵습니다. 트위터에서 속삭이는 채팅을하는 법을 말씀해 주시겠습니까? – wOxxOm

+0

트위치가 엠버에서 구현 한 방식 때문에 BetterTTV에서 속삭이는 변화를 구현하는 데 많은 어려움이있었습니다. 나는 당신이 여기서 무엇을하려고하는지 잘 모르겠지만, DOM 속삭임을 수정해야한다면 좋은 시간을 가지지 못할 것입니다. 우리는 작은 변화조차도 모든 것을 망가 뜨리는 것을 발견했습니다. – Teak

답변

0

나는이 문제를 발견 한 것 같습니다.내 방식 자체가 기본적으로 작동하지만 유일한 문제는 여러 개의 속삭임 대화가 열릴 때 document.getElementsByClassName("conversation-chat-line"); 전체 document에서 다른 사용자의 대화 (심지어 트 위치 잡이 봇)에서 메시지를 가져 오기 때문에 모두 버그가 발생한다는 것입니다. 이것은 LastWhisperTitleLastWhisperMessage의 값을 엉망으로 만듭니다.

var conversationHeaderNames = document.getElementsByClassName('conversation-header-name'); 
var currentConversation; 
// Find the correct conversation window 
for(i = 0; i < conversationHeaderNames.length; i++){ 
    if(conversationHeaderNames[i].innerHTML.trim() == ChannelName){ 
     currentConversation = conversationHeaderNames[i].parentNode.parentNode; 
     break; 
    } 
} 
if(!currentConversation) return; // No conversation with chat bot 

하고 난 그냥 currentConversationdocument를 교체해야하고 작동 :

이 솔루션은 내 함수의 시작 부분에이 코드를 삽입하는 것입니다.