使用socket.io实现简单聊天室案例


Posted in Javascript onJanuary 02, 2018

本文实例为大家分享了socket.io实现简单聊天室的具体代码,供大家参考,具体内容如下

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

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

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

    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);
    });

  </script>
</body>

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') ;  
}) ;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript实现仿银行密码输入框效果的代码
Dec 13 Javascript
JS 自定义函数缺省值的设置方法
May 05 Javascript
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
Nov 30 Javascript
jquery垂直公告滚动实现代码
Dec 08 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
Mar 13 Javascript
JS基础随笔(菜鸟必看篇)
Jul 13 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
Dec 05 Javascript
js实现打地鼠小游戏
Feb 13 Javascript
vue使用laydate时间插件的方法
Nov 14 Javascript
微信小程序日历效果
Dec 29 Javascript
详解微信小程序动画Animation执行过程
Sep 23 Javascript
Nest.js 授权验证的方法示例
Feb 22 Javascript
使用socket.io制做简易WEB聊天室
Jan 02 #Javascript
AngularJS实现的简单拖拽功能示例
Jan 02 #Javascript
AngularJS实现的锚点楼层跳转功能示例
Jan 02 #Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 #jQuery
Node实战之不同环境下配置文件使用教程
Jan 02 #Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 #jQuery
Node解决简单重复问题系列之Excel内容的获取
Jan 02 #Javascript
You might like
How do I change MySQL timezone?
2008/03/26 PHP
PHP中怎样保持SESSION不过期 原理及方案介绍
2013/08/08 PHP
老生常谈PHP位运算的用途
2017/03/12 PHP
php项目中类的自动加载实例讲解
2019/09/12 PHP
关于IFRAME 自适应高度的研究
2006/07/20 Javascript
JavaScript实现大数的运算
2014/11/24 Javascript
jQuery中first()方法用法实例
2015/01/06 Javascript
学习JavaScript设计模式(策略模式)
2015/11/26 Javascript
微信小程序 简单DEMO布局,逻辑,样式的练习
2016/11/30 Javascript
js处理层级数据结构的方法小结
2017/01/17 Javascript
html5 canvas 详细使用教程
2017/01/20 Javascript
canvas绘制一个常用的emoji表情
2017/03/30 Javascript
JS简单实现获取元素的封装操作示例
2017/04/07 Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
2017/09/21 Javascript
vue+Java后端进行调试时解决跨域问题的方式
2017/10/19 Javascript
vue.js打包之后可能会遇到的坑!
2018/06/03 Javascript
详解webpack编译速度提升之DllPlugin
2019/02/05 Javascript
vue实现移动端图片上传功能
2019/12/23 Javascript
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
2020/04/08 Javascript
[43:33]EG vs Spirit Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
Python中字典的浅拷贝与深拷贝用法实例分析
2018/01/02 Python
Python将多个excel文件合并为一个文件
2018/01/03 Python
利用Opencv中Houghline方法实现直线检测
2018/02/11 Python
Python实现爬取亚马逊数据并打印出Excel文件操作示例
2019/05/16 Python
Python学习笔记之pandas索引列、过滤、分组、求和功能示例
2019/06/03 Python
美国知名的家庭连锁百货商店:Boscov’s
2017/07/27 全球购物
2019史上最全Database工程师题库
2015/12/06 面试题
大学生就业自我鉴定
2013/10/26 职场文书
公益活动邀请函
2014/02/05 职场文书
家长对孩子的评语
2014/04/18 职场文书
减负增效提质方案
2014/05/23 职场文书
反腐倡廉警示教育活动心得体会
2014/09/04 职场文书
北京故宫导游词
2015/01/31 职场文书
2015年党员个人自我评价
2015/03/03 职场文书
单位同意报考证明
2015/06/17 职场文书
如何使用PostgreSQL进行中文全文检索
2021/05/27 PostgreSQL