search

Home >Web Front-end >JS Tutorial >node.js uses socket to implement chat instance sharing

node.js uses socket to implement chat instance sharing

小云云
小云云Original
2018-01-15 13:23:231576browse

This article mainly introduces the sample code of node.js using socket to implement chatting. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

Server setup

app.js


##

const http = require("http");
const express = require("./express");

//创建一个服务
const server = http.createServer(express);

//监听服务端口
server.listen(8001,()=>{
  console.log("服务端已经启动,请访问 http://localhost:8001");
});

express.js


const url=require("url");
const fs=require("fs");

function express(req,res){
  var urlObj=url.parse(req.url);
  //console.log(urlObj);

  var filePath="./www"+urlObj.pathname;
  var content="not found";
  if(fs.existsSync(filePath)){
    content=fs.readFileSync(filePath);
  }
  
  res.end(content.toString());
}


module.exports=express;

index.html


<!DOCTYPE html>
<html lang="en">
  <head>
   <meta charset="utf-8"/>
    <title>Socket.IO chat</title>
    <style>
     * { margin: 0; padding: 0; box-sizing: border-box; }
     body { font: 13px Helvetica, Arial; }
     form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
     form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
     form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
     #messages { list-style-type: none; margin: 0; padding: 0; }
     #messages li { padding: 5px 10px; }
     #messages li:nth-child(odd) { background: #eee; }
    </style>
   </head>
   <body>
    <ul id="messages"></ul>
    <form action="">
     <input id="m" autocomplete="off" /><button>Send</button>
    </form>

    <script src="js/lib/jquery-1.11.1.js"></script>
    <script src="js/lib/socket.io.js"></script> 
    <script src="js/index.js"></script>
   </body>
</html>

Client service establishment and server communication

We need to establish a server-side socket request connection


io.on(&#39;connection&#39;, function(socket){
  console.log(&#39;a user connected&#39;);

  //断开连接
  socket.on(&#39;disconnect&#39;, function(){
    console.log(&#39;user disconnected&#39;);
  });
});

index.js


//客户端建立连接 
var socket = io(); 
客户端向服务端发送请求
index.js

$(&#39;form&#39;).submit(function(){
  //触发事件
  socket.emit(&#39;chat message&#39;, $(&#39;#m&#39;).val());
  $(&#39;#m&#39;).val(&#39;&#39;);
  return false;
 });

app.js


//接收客户端的信息
socket.on(&#39;chat message&#39;, function(msg){
  console.log(&#39;message: &#39; + msg);
});

Broadcast the data from the server to the client


socket.on(&#39;chat message&#39;, function(msg){
    console.log(&#39;message: &#39; + msg);

    socket.broadcast.emit("clientE",msg);
  });

The client receives the data broadcast from the server


socket.on(&#39;clientE&#39;, function(msg){
  $(&#39;#messages&#39;).append($(&#39;<li>&#39;).text(msg));
});

Related recommendations:

nodejs implements WebSocket chat function based on WS module

jquery imitates WeChat Chat interface example sharing

Example detailed explanation of vue component parent-child communication chat room

The above is the detailed content of node.js uses socket to implement chat instance sharing. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Detailed explanation of vue getting input input valueNext article：Detailed explanation of vue getting input input value

Related articles

See more