使用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工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7647

CakePHP 教程

1392

steam的账户名称是什么格式

win11激活密钥永久

NYT迷你填字游戏答案

110

显示更多

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版

热门话题