使用socket.io如何實現聊天室-js教程-PHP中文網

首頁

web前端

js教程

使用socket.io如何實現聊天室

亚连

Jun 14, 2018 am 11:27 AM

socket.io 聊天室

這篇文章主要介紹了使用socket.io實現簡單聊天室案例，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了socket.io實現簡單聊天室的具體程式碼，供大家參考，具體內容如下

1、客戶端【index.html】代碼：

<body>
  <h3>socket简例</h3>
  <hr>
  <p id = &#39;app&#39;>
    <p>
      <p>
        <ul>
          <li v-for = &#39;item in msgs&#39;>
            {{item.name}}说：{{item.content}}
          </li>
        </ul>
      </p>
      <p>
        <p><input type="text" v-model = &#39;msg&#39;><button @click = &#39;m_send()&#39;>发送</button></p>
      </p>
    </p>
  </p>

  <script type="text/javascript" src = &#39;https://cdn.bootcss.com/vue/2.5.9/vue.min.js&#39;></script>
  <script type="text/javascript" src = &#39;https://cdn.bootcss.com/socket.io/1.7.3/socket.io.min.js&#39;></script>
  <script type="text/javascript">

    var _vm = new Vue({
      data :　{
        name : &#39;用户&#39;,
        msg : &#39;&#39;,
        msgs : [],
      },
      methods : {
        m_send : function() {

          // 向客户端发送消息
          socket_client.emit(&#39;say_client&#39;, {
            name : this.name,
            content : this.msg
          }) ;
          this.msg = &#39;&#39; ;
        }
      }
    }).$mount(&#39;#app&#39;) ;


    // socket服务器
    var socket_client = io.connect(&#39;http://127.0.0.1:3000&#39;) ; 

    /**
     * 监听服务端发来的消息
     *
     * 1、“say_server”是客户端发出信息时的key值
     * 2、“res”是客户端传来的value值
     */ 
    socket_client.on(&#39;say_server&#39; ,function(res){

      console.log(&#39;服务端发来的消息为：&#39;, res) ;

      _vm.msgs.push(res);
    });

  </script>
</body>

登入後複製

2、服務端【app.js】代碼：

const http = require(&#39;http&#39;) ;
const server = http.createServer() ;

// web服务器
const express = require(&#39;express&#39;) ;
const app = express();

app.use(express.static(__dirname + &#39;/public&#39;));

app.listen(8888, function () {
  console.log(&#39;web服务器成功启动了，IP：127.0.0.1，端口号：8888&#39;) ;
});


// socket服务器

const socketio = require(&#39;socket.io&#39;) ;
const socket_server = socketio(server) ;

// 建立和客户端的socket连接
socket_server.on(&#39;connection&#39;, function(client) {

// console.log(client) ;          // 查看连接进来的客户端对象内容  
// console.log(Object.keys(client)) ;    // 查看连接进来的客户端对象的关键key值

  /**
   * 监听客户端发来的消息
   *
   * 1、“say_client”是客户端发出信息时的key值
   * 2、“res”是客户端传来的value值
   */ 
  client.on(&#39;say_client&#39;, function(res) {
    console.log(&#39;客户端发来的消息为：&#39;, res) ;

    // 向客户端发送消息
    socket_server.emit(&#39;say_server&#39;, res) ;
  }) ;
}) ;


server.listen(3000, function() {
  console.log(&#39;socket服务器成功启动了，IP：127.0.0.1，端口号：3000&#39;) ;  
}) ;

登入後複製

上面是我整理給大家的，希望未來會對大家有幫助。

webpack該如何處理樣式？

在js中如何產生word圖片

在jQuery有關於函式庫的引用方法有哪些

以上是使用socket.io如何實現聊天室的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

Java教學

1662

CakePHP 教程

1419

Laravel 教程

1311

PHP教程

1261

C# 教程

1234

Related knowledge

如何使用MySQL和Java實作一個簡單的聊天室功能 Sep 21, 2023 pm 05:13 PM

如何使用MySQL和Java實作一個簡單的聊天室功能引言：在當今社群媒體的盛行下，人們越來越依賴線上聊天來交流和分享資訊。如何使用MySQL和Java實作一個簡單的聊天室功能是一個非常有趣且實用的專案。本文將介紹如何使用MySQL和Java來實現此功能，並提供具體的程式碼範例。一、搭建資料庫首先，我們需要在MySQL中建立一個資料庫來儲存聊天室的相關資訊。

如何使用Go語言開發Websocket聊天室 Dec 14, 2023 pm 01:46 PM

如何使用Go語言開發Websocket聊天室Websocket是一種即時通訊協議，透過建立一次連接，可以在伺服器和客戶端之間進行雙向通訊。在開發聊天室時，Websocket是一個非常好的選擇，因為它可以實現即時訊息交流，並且能夠提供高效的效能。本文將介紹如何使用Go語言開發一個簡單的Websocket聊天室，並提供一些具體的程式碼範例。一、準備工作1.安裝Go

基於JavaScript建立即時聊天室 Aug 10, 2023 pm 11:18 PM

基於JavaScript建立即時聊天室隨著網路的快速發展，人們越來越注重即時通訊和即時互動體驗。而即時聊天室作為一種常見的即時通訊工具，對於個人和企業來說都非常重要。本文將介紹如何使用JavaScript建立一個簡單的即時聊天室，並提供對應的程式碼範例。我們首先需要一個前端頁面作為聊天室的UI介面。以下是一個簡單的HTML結構範例：<!DOCTYPE

ThinkPHP6聊天室開髮指南：實現即時通訊功能 Aug 12, 2023 pm 02:31 PM

ThinkPHP6聊天室開髮指南：實現即時通訊功能引言：隨著網路的快速發展，即時通訊的需求也越來越大。聊天室作為一種常見的即時通訊方式，受到了廣泛的關注和使用。本文將透過使用ThinkPHP6框架，為大家提供一個簡單、快速實現即時通訊功能的方法。一、環境配置：在開始之前，我們需要先配置開發環境。確保你已經安裝了PHP和ThinkPHP6框架。同時，本文將使

利用php和Websocket開發聊天室功能 Dec 02, 2023 am 11:08 AM

利用PHP和Websocket開發聊天室功能引言：隨著網路的快速發展，聊天室成為人們日常交流和社交的重要手段之一。利用PHP和Websocket技術開發一個聊天室功能可以實現即時的雙向通信，為用戶提供更流暢便捷的聊天體驗。本文將介紹如何使用PHP和Websocket來實作一個簡單的聊天室，並提供具體的程式碼範例。一、準備工作：在開始開發之前，我們需要確保

nginx代理socket.io服務的坑怎麼解決 May 13, 2023 pm 12:43 PM

nginx代理了兩台socket.io伺服器。 socket.io的工作模式是polling升級到websocket現象透過nginx請求服務時，出現了大量的400錯誤，有時候能升級到websocket，有時候會一直報錯。但是直接透過ip+連接埠存取時，100%能成功。分析sidsid是我們這個問題的關鍵。在初始建立連線時（polling模式就是在模擬一個長連線），客戶端會啟動這樣的請求：https://***/?eio=3&transport=polling&t=154082071

Swoole實戰：快速打造基於WebSocket的聊天室 Jun 14, 2023 pm 04:20 PM

在網路時代，聊天室成為了人們交流、社交的重要場所。而WebSocket技術的出現，則使得即時通訊變得更流暢、更穩定。今天，我們介紹如何利用Swoole框架快速建立一個基於WebSocket的聊天室。 Swoole是一款高效能的PHP協程網路通訊框架，採用C語言編寫，集非同步IO、協程、網路通訊等功能於一身，使得PHP程式碼能夠像Node.js

PHP和WebSocket整合實現即時聊天室的開發 Jun 25, 2023 pm 01:13 PM

在Web開發領域中，即時聊天功能已經越來越普及。它可以幫助用戶輕鬆地進行即時互動，增進交流和了解。為了實現即時聊天，我們需要使用WebSocket協議，並且需要一種可以處理WebSocket請求的程式語言。在本文中，我們將介紹如何使用PHP和WebSocket整合實現即時聊天室的開發。 WebSocket是一種全雙工的通訊協議，可以在瀏覽器和伺服器之間進行即時

See all articles

使用socket.io如何實現聊天室

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題