如何使用socket.io实现聊天室-梓潼大橙子建站

新闻中心

这里有您想知道的互联网营销解决方案

如何使用socket.io实现聊天室

这篇文章主要为大家展示了“如何使用socket.io实现聊天室”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何使用socket.io实现聊天室”这篇文章吧。

10多年的辽源网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。成都全网营销的优势是能够根据用户设备显示端的尺寸不同，自动调整辽源建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。成都创新互联公司从事“辽源网站设计”,“辽源网站推广”以来，每个客户项目都认真落实执行。

1、客户端【index.html】代码：


  socket简例
  
  
    
      
        
          
            {{item.name}}说：{{item.content}}
          
        
      
      
        发送

var _vm = new Vue({ data :　{ name : '用户', msg : '', msgs : [], }, methods : { m_send : function() { // 向客户端发送消息 socket_client.emit('say_client', { name : this.name, content : this.msg }) ; this.msg = '' ; } } }).$mount('#app') ; // socket服务器 var socket_client = io.connect('http://127.0.0.1:3000') ; /** * 监听服务端发来的消息 * * 1、“say_server”是客户端发出信息时的key值 * 2、“res”是客户端传来的value值 */ socket_client.on('say_server' ,function(res){ console.log('服务端发来的消息为：', res) ; _vm.msgs.push(res); });

2、服务端【app.js】代码：

const http = require('http') ;
const server = http.createServer() ;

// web服务器
const express = require('express') ;
const app = express();

app.use(express.static(__dirname + '/public'));

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


// socket服务器

const socketio = require('socket.io') ;
const socket_server = socketio(server) ;

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

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

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

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


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

以上是“如何使用socket.io实现聊天室”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

本文标题：如何使用socket.io实现聊天室
本文来源：http://sczitong.cn/article/gesicp.html

新闻中心

socket简例

其他资讯