看效果

為臺州等地區(qū)用戶提供了全套網(wǎng)頁設計制作服務，及臺州網(wǎng)站建設行業(yè)解決方案。主營業(yè)務為成都網(wǎng)站設計、成都做網(wǎng)站、臺州網(wǎng)站設計，以傳統(tǒng)方式定制建設網(wǎng)站，并提供域名空間備案等一條龍服務，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

一直說我喜歡賣關子，這次直接看效果：

聊天界面（喜歡的可以自己畫一個比較逼真的頁面）

前文

先說一下為什么寫這個東西，最近不是在寫NodeJS知識點的梳理嘛，但是我發(fā)現(xiàn)梳理的過程著實無聊的要死，雖然已經(jīng)快梳理一半了，只是還沒發(fā)布，這個不重要，重要的是不做點什么東西確實無聊，所以今天把我做這個的過程記錄給你們看一下，喜歡的可以拿去玩玩。實現(xiàn)的功能是可以聊天，可以顯示用戶自定義的昵稱，并且顯示發(fā)送時間

PS：這個功能如果我們使用webstorm新建一個express app的項目的話，是可以省很多代碼的，但是這里我們選擇原生實現(xiàn)它，原因是我們寫代碼不可能一直依賴于別人搭建好的框架或者輪子，雖然我們提倡不重復造輪子，但是如果每一個程序員都這樣想的話，這個行業(yè)面臨的將是一個輪子都沒有。

客戶端代碼

  
  
  


  

    WelCome to CSDN of clearlove
  
  

    If you like my article, you can follow my blog
  
  
公屏聊天
  

  
  
  
  發(fā)送

服務端代碼

/**
 * @author clearlove
 * @aim 測試連接一個socket.io通信 廣播
 */
//引入fs
var fs = require('fs')
//引入http 
var http = require('http')
var date = new Date()
/**
 * @FormDate 格式化時間
 * @param {*} date 當前時間
 */
function FormDate(date) {
  return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}`
}
/**
 * 搭建一個服務器
 */
var server = http.createServer(function (res, res) {
  if (res.url !== '/favicon.ico') {
    res.writeHead(200, { "Content-type": "text/html" })
    const myreadstream = fs.createReadStream(__dirname + '/views/http_demo.html', 'utf-8')
    myreadstream.pipe(res)
  }
})
//引入socket.io 這里是兩步，第一步是io = require('socket.io') 第二步是一個新的變量.server 合成一步就是下面的代碼
var io = require('socket.io')(server);
io.on("connection", function (socket) {
  //這里獲取到對方的ip地址，可以展示，也可以不展示，也可以進行ip的過濾
  var clientIp = socket.request.connection.remoteAddress
  console.info("一個socket連接成功了")
  socket.on("link_to_server", function (msg, nick) {
    //這里使用io發(fā)送 
    io.emit('link_to_client', `${nick} : ${msg} ${FormDate(date)}`)
  })
})
server.listen(5000, '0.0.0.0');
console.info("server is running...")

服務跑起來

隱藏一下ip吧，為了安全

當然上面我用的一些可能比較‘原生'，直接創(chuàng)建元素什么的，我是因為沒有引入類似jquery這樣的框架進來，引入的話就比較簡單的，但是不影響我們實現(xiàn)這個基礎的聊天功能，上面可能有一些你們不明白的地方或者是你們都明白，包括為什么上面啟動的時候不是node+文件名字而是nodemon+文件名，有什么區(qū)別，有什么好處，都沒關系，后面的文章我都會介紹上面用到的所有的知識點，具體怎么使用的，怎么出來的， 為什么這么寫，怎么一步一步實現(xiàn)目前的這個效果，后面的文章我都會更新，為什么這個時候寫這個呢？原因是我想讓更多的人知道NodeJS本身是一個很好玩的語言，可以做的事情很多。如果你們看了我的文章以后喜歡上了NodeJS我的目的就達到了，畢竟我還是覺得NodeJS是一個非常強大的語言，我希望更多的人使用它。

如果有人覺得不想看那么多就想玩玩這個效果的，也可以，直接安裝node、然后本地初始化一個package.json，然后安裝nodemon、socket.io就可以了，具體怎么安裝，emmmmm

安裝node

下載node

下一步下一步就好了

初始化package.js

npm init

輸入名字 版本號之后 一直回車就好了

安裝nodemon

npm install -g nodemon --save-dev

安裝socket.io

npm install socket.io --save-dev

總結

以上所述是小編給大家介紹的NodeJS實現(xiàn)一個聊天室功能,點擊跳轉按鈕實現(xiàn)跳轉，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！