2. 程式人生 > >express + socket.io實現超簡易聊天室

express + socket.io實現超簡易聊天室

阿新 • • 發佈：2018-12-06

什麼是socket.io

socket.io是webSocket的一個封裝元件，實現雙向通訊，可以用這個來實現聊天室功能、線上小遊戲等等，是個有趣好玩的東西，博主就喜歡搗鼓這些

實現聊天室思路

聊天室就是要聊天嘛，就像打電話一樣，我這邊說話你那邊應該要馬上聽到，所以就需要用到雙向通訊，瀏覽器發出一條資訊比如是一個字串'message',服務端接收然後立馬將它傳送出去給需要接收的瀏覽器

首先下載express和socket.io的依賴包

cnpm install --save express
cnpm install --save socket.io

前端程式碼

<!DOCTYPE html>
 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .chat{
            width: 300px;
            height: 500px;
            text-align: center;
            margin: 0 auto;
            border: 1px solid #ccc;
        }
        .message
 
{
            width: 100%;
            height: 460px;
        }
    </style>
</head>
<body>
    <div class="chat">
        <div class="message"></div>
        <input id="text" type="text" placeholder="請輸入聊天資訊">
        <button onclick="chat()">傳送資訊</button
 
>
    </div>

    <script src="/socket.io/socket.io.js"></script>

    <script>
        var message = document.getElementsByClassName('message')[0]
        var socket = io.connect('http://localhost:1234');
        //從服務端接收資料
        socket.on('message',function (data) {
        
            message.innerHTML += data + '<br>';
        })
        function chat(){
            var text = document.getElementById('text').value
            //向服務端傳送資料
            socket.emit('message', {message:text});


        }

    </script>
</body>
</html>

node程式碼

var express = require('express')
var app = require('express')();
var server = require('http').Server(app);
var io = require('socket.io')(server);


//提供靜態檔案服務
app.use(express.static(__dirname));



io.on('connection', function (socket) {
    socket.on('message', function (data) {
        //服務端像所以也沒傳送資料
        io.sockets.emit('message', data.message);
    });

});

server.listen(1234,function () {
    console.log('連線成功');
})

幾個要點稍微提一下首先是前端引入js檔案時候

<script src="/socket.io/socket.io.js"></script>

可能你會疑惑本地沒有這個檔案，但其實你在服務端執行你的html時候它就會自動生成所以不用擔心直接這樣引入就行啦

關於傳送接收資訊

socket.emit()//傳送
socket.on()//接收

io.sockets.emit()//只要服務端這樣哦,像所有連線server的傳送就像廣播了

最後執行node,開啟兩個對應埠的html，結果為




如果有哪裡說的不對或者不好還請見諒！謝謝！

相關推薦

express + socket.io實現超簡易聊天室

什麼是socket.io socket.io是webSocket的一個封裝元件，實現雙向通訊，可以用這個來實現聊天室功能、線上小遊戲等等，是個有趣好玩的東西，博主就喜歡搗鼓這些 實現聊天室思路 聊天室就是要聊天嘛，就像打電話一樣，我這邊說話你那邊應該要馬上聽到，所以就需要用到雙向通訊，瀏覽器發

1024_(即時通訊)使用node.js和socket.io實現多人聊天室

使用node.js和socket.io實現多人聊天室 2015年01月24日 03:24:54 遠古大猛獁 閱讀數：2775 轉自： http://www.cnblogs.com/flyoung2008/archive/2012/07/19/2600132.html

基於Linux c 用socket和執行緒 實現的簡易聊天室之伺服器

#include <stdio.h> #include <string.h> #include <stdlib.h> #include <sys/types.h> #include <sys/socket.h> #

使用socket.io實現簡單的聊天功能

ins sock UNC say mes 輪詢 var document style Socket.io實際上是WebSocket的父集，Socket.io封裝了WebSocket和輪詢等方法 首先得在你的項目中安裝socket.io $ npm install sock

Netty+Websocket 實現一個簡易聊天室

後臺程式碼 /** * 服務端 */ public class ChatServer { public static void main(String[] args) throws Exception { int port=8080; //服務端預設埠 new Ch

基於Node.js + socket.io實現WebSocket的聊天DEMO

原文摘自我的前端部落格，歡迎大家來訪問 簡介 最近看Node.js和HTML5，練手了一個簡易版的聊天DEMO，娛樂一下 為什麼需要socket.io？ node.js提供了高效的服務端執行環境，但是由於瀏覽器端對HTML5的支援不一， 為了相容所有瀏覽器，提供卓越

Socket.IO實現簡單聊天室

Socket.IO介紹 官方文件 https://socket.io/docs/ Socket.io是一個跨瀏覽器支援WebSocket的實時通訊的JS。它不僅簡化了介面，使得操作更容易，而且對於那些不支援WebSocket的瀏覽器，會自動降為Ajax連線，最大限度地保證了相容性。它

利用socket.io搭建一個簡易的聊天室

前言 本篇介紹使用node.js模組元件socket.io實現一個非常非常簡易的聊天案例。 本系列文章不對 socket.io 歷史背景做過多闡述，只會通過一個個的案例帶領大家進入socket.io的殿堂，增進小夥伴在socket.io實際開發中的基本使用。 socket.

Node.Js+Redis+Socket.IO 實現 聊天室或推送訊息

基於Redis 推送，向Node.Js 推送訊息，Node.Js 把 訊息推送給 Socket.IO(可以是WebSocket，也可以是long-Polling,由Socket.IO 封裝) 需要 Redis服務端，Node.Js需要 redis模組和Socket.IO模組

聊天室入門實戰（node，socket.io實現)--第一章（實現登入群聊功能）

這幾天花時間寫了一個聊天室的demo，實現了登入，使用者名稱檢測，群聊，單聊，圖片傳送等功能，這個系列部落格會分為幾章講解，由淺入深，逐步優化，章節間關聯性較大，建議從第一章開始閱讀。由於水平有限，有說的不對的地方還請各位大佬們留言指正。有不清楚的地方也可以留言提問。該部

Socket程式設計實現簡易聊天室

1 　　public class ServerThread implements Runnable { 2 　　 3 　　 //定義當前執行緒所處理的Socket 4 　　 private Socket socket = null; 5 　　 //該執行緒所處理的Socket對

實現簡易聊天室（一）

ima log body .com 麻煩 導入 定義 右鍵 正常 預備工作： （1）讀取文件的時候可能會遇到多個文件一起傳，可以用線程池。 （2）發送不同類型的請求時，如發送的是聊天信息，發送的是文件，發送的是好友上線請求等，但對於接受者來說都是字節流無法分別，這就需要我們

Netty+Android搭建一個簡易聊天室（實現群聊和私聊）

零，前言 JRBM專案中無論是好友私聊，公開聊天室，還是比賽平臺都需要用到長連線，之前沒有接觸過網路通訊等知識，更別說框架了，因此直接上手netty確實有些困難，在前期主要是在b站上看（https://www.bilibili.com/video/av26415011）這個

python編寫簡易聊天室實現區域網內聊天

功能: 可以向區域網內開啟接收資訊功能的ip進行傳送資訊,我們可以寫兩段埠不同的程式碼來實現在一臺電腦上與自己聊天. 關鍵點: 要想實現此功能必須將程式的埠固定 from socket impo

基於websocket的簡易聊天室的實現

用java實現基於websocket的簡易聊天室    WebSocket protocol 是HTML5一種新的協議。它實現了瀏覽器與伺服器全雙工通訊(full-duplex)。一開始的握手需要藉助HTTP請求完成。                          

php基於websocket搭建簡易聊天室(socket)

前言 http連線分為短連線和長連線。短連線一般可以用ajax實現，長連線就是websocket。短連線實現起來比較簡單，但是太過於消耗資源。websocket高效不過相容存在點問題。websocket是html5的資源 前端 //連線socket

H5+MUI+Node.js+Socket.io實現即時聊天以及傳送+圖片壓縮+圖片預覽儲存

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,i

用socket.io實現websocket的一個簡單例子

soc .html www sock 在線 ket log html 簡單例子 http://biyeah.iteye.com/blog/1295196 socket.io的介紹 http://www.cnblogs.com/mazg/p/5467960.html

go語言實現簡單的聊天室

tcp協議 golang聊天室通常聊天室的架構分為服務器端和客戶端： 服務器端：接受來自於客戶端的連接請求並建立連接；所有客戶端的連接會放進連接池中，用於廣播消息； 客戶端：連接服務器；向服務器發送消息；接收服務器的廣播消息； 註意事項：某一個客戶端斷開連接後需要從連接池中摘除，並不再接收廣播消息；某一個客戶

node+express+socket.io+mysql=通訊服務器搭建（一）

釋放 get future 連接mysql add .com 成功 query tp服務器 首發github/blog 歡迎大家評論給星 安裝 首先假定你已經安裝了 Node.js，接下來為你的應用創建一個目錄，然後安裝express-generator應用骨架 $ mkd