3

我已经在这个聊天中添加了语音，所以它现在是一个组合的语音/文本聊天。您可以在以下 URL 的 github 上找到我的贡献：

https://github.com/HowardRichman/simple-text-voice-chat-in-node-and-javascript

这是一个在 Centos 6.9 中使用 Node.js 服务器和 jquery javascript 客户端的安全 websocket 聊天的工作示例。只涉及两个文件：(1) server.js 和 (2) client.htm。

这是我使用以下 linux 命令行运行的 server.js 的代码：node server.js

const fs = require('fs');
const https = require('https');
const WebSocket = require('ws');

const server = new https.createServer({
  cert: fs.readFileSync('/var/cpanel/ssl/apache_tls/example.com/combined'),
  key: fs.readFileSync('/var/cpanel/ssl/apache_tls/example.com/combined')
});
const wss = new WebSocket.Server({ server });
var msg;

wss.on('connection', function connection(ws) 
{
  ws.on('message', function incoming(message) 
  {
    msg = message;
    console.log('received: %s', msg);
    wss.clients.forEach(function (client) 
    {
       if (client.readyState == WebSocket.OPEN) 
       {
          client.send( msg );
       }
    });
  });

  ws.send('Chat room is working!');
});

server.listen(8089);

笔记：

  1. 您必须将上述路径更改为安全证书和密钥的路径。我在服务器的 httpd.conf 文件中找到了这些路径。

  2. 或者，您可以将端口从本文件和客户端文件中的 8089 更改为另一个可用端口。（通常可以使用 8081 到 8099 的端口。）

这是 client.htm 文件的代码，应该使用 https URL（例如https://example.com/client.htm）访问：

<!DOCTYPE html>
<html>
<head>
<TITLE>Chat Client</TITLE>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var webSocket;
var firstTime = true;

function connectWsChat()
{
  try 
  {
    window.WebSocket = window.WebSocket || window.MozWebSocket;
    var host = 'wss://example.com:8089/';
    webSocket = new WebSocket( host );
     webSocket.onopen = function() 
     {
      var chatUser = $( '#chatUser' ).val();
      webSocket.send( '<p>' + chatUser + ' has entered the chat room' );
       $( '#chatButton' ).text( 'Disconnect' );
     }
     webSocket.onmessage = function( msg ) 
     {
        logWsChatMessage( '<p class="message">' + msg.data + '</p>' );
     }
     webSocket.onclose = function() 
     {
      var chatUser = $( '#chatUser' ).val();
       logWsChatMessage( '<p>' + chatUser + ' has left the chat room</p>' );
       // $( '#chatButton' ).text( 'Connect' );
     }
   } 
   catch( exception ) 
   {
      logWsChatMessage( '<p>Error ' + exception + '.</p>' );
   }
}

function isConnectedWsChat() {
  if( webSocket && webSocket.readyState==1 ) {
    $( '#chatButton' ).text( 'Disconnect' );
    return 1;
  }
}

function playSound(){
    var audio = new Audio('notify.mp3');
    audio.play();   
}


function sendWsChat() {
  var chatLog = $( '#chatLog' );
  if( isConnectedWsChat() ) {
    var chatUser = $( '#chatUser' ).val();
    var chatText = $( '#chatText' ).val();
    if( chatUser=='' || chatText=='' ){
      return;
    }
    try{
      chatLog.scrollTop( chatLog.prop( 'scrollHeight' ) );
      webSocket.send( chatUser + ': ' + chatText );
      //logWsChatMessage( '<p class="event">Sent: ' + chatText + '</p>' )
    } catch( exception ){
      logWsChatMessage( '<p class="warning"> Error: ' + exception + '</p>' );
    }
    $( '#chatText' ).val( '' );
  }
}

function logWsChatMessage(msg) {
  var chatLog = $( '#chatLog' );
  var sTop = Math.round( chatLog.prop( 'scrollTop') );
  var sHeight = chatLog.prop( 'scrollHeight' );
  var cHeight = chatLog.prop( 'clientHeight' );

  chatLog.append( '<p>' + msg + '</p>' );

  if (firstTime) 
  {
    chatLog.scrollTop( chatLog.prop( 'scrollHeight' ) );
    firstTime = false;
  } 
  else if (sTop + cHeight == sHeight ) 
  {
    chatLog.scrollTop( chatLog.prop( 'scrollHeight' ) );
  }
  playSound();
}

$(document).ready( function() {

  if( !( 'WebSocket' in window ) ) {
    $( '#chatInput').fadeOut( 'fast' );
    $( '<p>Oh no, you need a browser that supports WebSockets.</p>' )
        .appendTo( '#chatContainer' );
  } else {
    connectWsChat();
  }

  $( '#chatText' ).keypress( function( event ) {
    if( event.keyCode == '13' ) {
      sendWsChat();
    }
  });

  $( '#startButton' ).click( function() {
     window.open('chat.pl','_self');
  });

  $( '#saveButton' ).click( function() {
     window.open('chat1.pl','_self');
  });


  $( '#chatButton' ).click( function() {
    if( webSocket && webSocket.readyState==1 ) {
      var chatUser = $( '#chatUser' ).val();
      webSocket.send( '<p>' + chatUser + ' has left the chat room.</p>' );
      webSocket.close();
      $( this ).text( 'Connect' );
    } else {
      //webSocket.open();
      connectWsChat();
      $( this ).text( 'Disconnect' );
    }
  });

  $( window ).on ("unload", function(e) {
    if( webSocket && webSocket.readyState==1 ) {
      var chatUser = $( '#chatUser' ).val();
      webSocket.send( '<p>' + chatUser + ' has left the chat room.</p>' );
      webSocket.close();
    }
  });

});
</script>
<div id="chatContainer">
<div id="chatLog">
</div>
<div id="chatInput">
<p>Name: <input id='chatUser' type="text" size=40 />
<br>Text: <input id="chatText" type="text" size=40 />
<br><button id="chatButton">Chat not yet set up</button>
</p>
</div>
</div>
</body>
</html>

笔记：

  1. 将 example.com 更改为您网站的名称。

  2. 我只在 Chrome 和 Firefox 中测试过这段代码。在 Firefox 中，如果用户之前曾在聊天室中，则当用户进入聊天时，用户的姓名会自动出现在姓名框中。这在 Chrome 中不会发生，但您可能会使用 cookie 来确保该名称出现在 Chrome 中。

  3. 用户通过单击“Enter”发布。

  4. 声音文件 notify.mp3 是每当有新帖子从服务器到达时播放的哔声。我没有在此处包含该文件。

  5. 关于滚动和客户端高度的命令允许用户向上滚动以阅读快速聊天中的早期帖子，而不会在新消息进入时被迫到底部。我的 css 文件（不包括在内）包含一个 max-height 命令让这个工作可能需要的chatLog划分这是我的css代码的一部分：#chatLog {max-height：430px; 溢出-y：自动；宽度：100%}。

我的问题：

在我开始聊天之前不久，我正在研究一个不同的解决方案，并在我的 Apache 配置文件中加载了 mod_proxy_wstunnel.so。我不知道这是否有必要。

我的问题是：如果你没有加载 mod_proxy_wstunnel.so，你能得到一个安全的 websocket 聊天吗？

4

0 回答 0