使用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 相关文章推荐
验证用户是否修改过页面的数据的实现方法
Sep 26 Javascript
一样的table?不一样的table(可编辑状态table)
Sep 19 Javascript
高效的jquery数字滚动特效
Dec 17 Javascript
jquery 遍历数组 each 方法详解
May 25 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
Feb 20 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
js实现方块上下左右移动效果
Aug 17 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
vue全局自定义指令-元素拖拽的实现代码
Apr 14 Javascript
Vue 实例事件简单示例
Sep 19 Javascript
vant picker+popup 自定义三级联动案例
Nov 04 Javascript
js闭包的9个使用场景
Dec 29 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
PHP根据传来的16进制颜色代码自动改变背景颜色
2014/06/13 PHP
ThinkPHP模板中判断volist循环的最后一条记录的验证方法
2014/07/01 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
JS JavaScript获取Url参数,src属性参数
2021/03/09 Javascript
javascript jQuery $.post $.ajax用法
2008/07/09 Javascript
JavaScript DOM 添加事件
2009/02/14 Javascript
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
2010/06/12 Javascript
jquery.validate分组验证代码
2011/03/17 Javascript
jQuery.clean使用方法及思路分析
2013/01/07 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
2014/03/22 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
2014/04/15 Javascript
jquery+html5烂漫爱心表白动画代码分享
2015/08/24 Javascript
跟我学习javascript的垃圾回收机制与内存管理
2015/11/23 Javascript
基于angular2 的 http服务封装的实例代码
2017/06/29 Javascript
JQuery EasyUI的一些常用组件
2017/07/12 jQuery
利用node.js爬取指定排名网站的JS引用库详解
2017/07/25 Javascript
vue实现商品加减计算总价的实例代码
2018/08/12 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
2019/09/19 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
2019/11/01 Javascript
为什么推荐使用JSX开发Vue3
2020/12/28 Vue.js
[01:00:49]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第二场 1月31日
2021/03/11 DOTA
python中getaddrinfo()基本用法实例分析
2015/06/28 Python
Django基础知识与基本应用入门教程
2018/07/20 Python
Python 获取主机ip与hostname的方法
2018/12/17 Python
在Python中构建增广矩阵的实现方法
2019/07/01 Python
Python 使用 docopt 解析json参数文件过程讲解
2019/08/13 Python
Python中base64与xml取值结合问题
2019/12/22 Python
Python如何将图像音视频等资源文件隐藏在代码中(小技巧)
2020/02/16 Python
django日志默认打印request请求信息的方法示例
2020/05/17 Python
深入浅析HTML5中的article和section的区别
2018/05/15 HTML / CSS
英国礼品和生活方式品牌:Treat Republic
2020/11/21 全球购物
文体活动实施方案
2014/03/27 职场文书
技术负责人任命书
2014/06/05 职场文书
公司门卫工作职责
2014/06/28 职场文书
MySql 缓存查询原理与缓存监控和索引监控介绍
2021/07/02 MySQL
世界十大评分最高的动漫,CLANNAD上榜,第八赚足人们眼泪
2022/03/18 日漫