집 > 기사 > 웹 프론트엔드 > nodejs를 사용하여 채팅 기능을 구현하는 방법은 무엇입니까?

nodejs를 사용하여 채팅 기능을 구현하는 방법은 무엇입니까?

亚连원래의: 2018-06-12 13:33:482819검색

이 글에서는 WS 모듈을 기반으로 WebSocket 채팅 기능을 구현하는 nodejs의 방법을 주로 소개합니다. WebSocket 통신용 WS 모듈을 사용하여 nodejs의 구체적인 작업 기술을 분석하여 필요한 친구의 형태로 채팅 기능을 구현합니다. 참고하시면 됩니다

이 글의 예시는 Nodejs가 WS 모듈을 기반으로 WebSocket 채팅 기능을 구현하는 것을 설명하고 있습니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.

WebSocket 모듈이 많기 때문에 구현하기 더 간단한 모듈을 선택했습니다.

도구: Sublime

기술: Node.js 참조 모듈 ws

최종 효과는 다음과 같습니다

원래 네트워크 드로잉보드를 만들려고 했으나 할 일을 잊어버려서 그룹만 구현했습니다. 여기 채팅 기능

소개할 것이 없습니다. 인터넷에 코드 사례가 너무 많습니다. (초보자가 직면하는 주요 문제는 노드 가져오기 모듈의 문제일 수 있습니다.)

설치 모듈 소개:

설치 노드 디렉토리를 찾으세요. npm 디렉터리에 들어가서 cmd를 실행하고

npm install --save ws

를 입력하세요. 소스 파일은 참조할 수 있도록 npm 디렉터리에 넣어두는 것이 가장 좋습니다. (나도 초보라서 양해 부탁드립니다.)
그런 다음 노드를 실행합니다.

소스 코드: js 파일로 저장하세요

//https://github.com/websockets/ws/blob/master/doc/ws.md#new-wsserveroptions-callback
var WebSocketServer = require(&#39;ws&#39;).Server,
  wss = new WebSocketServer({
    port: 3000, //监听接口
    verifyClient: socketVerify //可选，验证连接函数
  });
function socketVerify(info) {
  console.log(info.origin);
  console.log(info.req.t);
  console.log(info.secure);
  // console.log(info.origin);
  // var origin = info.origin.match(/^(:?.+\:\/\/)([^\/]+)/);
  //if (origin.length >= 3 && origin[2] == "blog.luojia.me") {
  //  return true; //如果是来自blog.luojia.me的连接，就接受
  //}
  // console.log("连接",origin[2]);
  return true; //否则拒绝
  //传入的info参数会包括这个连接的很多信息，你可以在此处使用console.log(info)来查看和选择如何验证连接
}
//广播
wss.broadcast = function broadcast(s,ws) {
  // console.log(ws);
  // debugger;
  wss.clients.forEach(function each(client) {
    // if (typeof client.user != "undefined") {
      if(s == 1){
        client.send(ws.name + ":" + ws.msg);
      }
      if(s == 0){
        client.send(ws + "退出聊天室");
      }
    // }
  });
};
// 初始化
wss.on(&#39;connection&#39;, function(ws) {
  // console.log(ws.clients.session);
  // console.log("在线人数", wss.clients.length);
  ws.send(&#39;你是第&#39; + wss.clients.length + &#39;位&#39;);
  // 发送消息
  ws.on(&#39;message&#39;, function(jsonStr,flags) {
    var obj = eval(&#39;(&#39; + jsonStr + &#39;)&#39;);
    // console.log(obj);
    this.user = obj;
    if (typeof this.user.msg != "undefined") {
      wss.broadcast(1,obj);
    }
  });
  // 退出聊天
  ws.on(&#39;close&#39;, function(close) {
    try{
      wss.broadcast(0,this.user.name);
    }catch(e){
      console.log(&#39;刷新页面了&#39;);
    }
  });
});

html 프런트엔드 소스 코드:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>聊天</title>
  <link rel="stylesheet" href="">
  <script language="JavaScript" src="http://code.jquery.com/jquery-1.11.0.js"></script>
  <script type="text/javascript">
  </script>
</head>
<style type="text/css" media="screen">
p {
  border: 1px solid #cccccc;
  width: 500px;
  min-height: 100px;
}
</style>
<body>
  <p id="show">
  </p>
  <input type="text" id="message" name="" value="" placeholder="">
  <input type="text" id="name" value="" placeholder="昵称;">
  <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" onclick="send()">发送</a>
  <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" onclick="exit()">退出</a>
  <!-- <input type="text" id="token" name="" value="" placeholder="" readonly="false"> -->
</body>
<script type="text/javascript">
var ws = new WebSocket("ws://127.0.0.1:3000?t=test");
ws.onopen = function() {
  console.log("连接状态", ws);
  $("#show").html("连接状态;" + ws.readyState + "</br>");
  console.log("open");
  ws.open("start");
};
ws.onmessage = function(evt) {
  // console.log(evt.data)
  // alert(evt.data);
  $("#show").append(evt.data + "</br>");
};
ws.onclose = function(evt) {
  console.log("WebSocketClosed!");
  console.log(evt);
};
ws.onerror = function(evt) {
  console.log("WebSocketError!");
};
function send() {
  var msg = $("#message").val();
  var key = $("#token").val();
  var name = $("#name").val();
  var str = "{name:&#39;" + name + "&#39;,msg:&#39;" + msg + "&#39;,key:&#39;" + key + "&#39;}";
  console.log("发送", str);
  ws.send(str);
};
function exit() {
  var r = ws.close();
  console.log("退出", r);
}
</script>
</html>

채팅에는 검증이 별로 없고 이름은 마음대로 변경할 수 있습니다.

위 내용은 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되기를 바랍니다.

nodejs를 사용하여 채팅 기능을 구현하는 방법은 무엇입니까?

관련 기사